Почему комбинация двух поисков не работает?

У меня есть страница с двумя списками:

  • в одном списке есть несколько элементов, каждый элемент списка соответствует категории, при щелчке по категории в блоке #conferences появляются конференции, принадлежащие этой выбранной категории
  • в другом списке есть города, при щелчке по городу в div #conferences появляются конференции, в столбце «город» которых указано значение города, по которому щелкнули мышью.

Это нормально работает.

Проблема: Проблема заключается в сочетании двух поисков. Например, если пользователь, не обновляя страницу, сначала щелкает по определенной категории, а затем по определенному городу. Например, если пользователь щелкнет в категории «Большие данные» и в городе «Ньюкасл», в разделе #conferences должны появиться конференции, которые принадлежат выбранной категории (большие данные) и имеют значение «Ньюкасл» в столбец «город». Но это не работает. Вы знаете, что нужно для этого?

// список с категориями

<ul class="Categories__Menu">
    @foreach($categories->take(6) as $category)
        <li class="">
            <a href="javascript:void(0)" name="category" id="{{$category->id}}">{{$category->name}}</a>
        </li>
    @endforeach
    <li><a  data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">More <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>

Когда выбирается категория, у меня есть jQuery ниже, чтобы показать в div #conferences последние 8 конференций, принадлежащих к этой выбранной категории.

$("a[name='category']").on('click', function(){
    $(".active").removeClass("active");
    if($(this).closest(".modal-list").length) {
        $('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');
        $('.clicked_category').html($(this).text());
        $('#categoriesModal').modal('hide');
        $('#showCategories').parent('li').addClass('active');
    }
    else
    {
        $(this).parent('li').addClass('active');
    }

    var category_id = $(this).attr("id");
    $(this).parent('li').addClass('active');

    $.ajax({
        url: '{{ route('category.conferences',null) }}/' + category_id,
        type: 'GET',
        success:function(result){
            $('#conferences').empty();
            var newConferences='';
            var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
            $.each(result, function(index, conference) {

                newConferences += '<div>\n' +
'                        <div>\n' +
'                            <img src='+ imageUrl +' alt="Card image cap">\n' +
'                            <div>\n' +
'                                <h5>'+conference.name+'</h5>\n' +
'                            </div>\n' +
'                    </div></div>';
            });

            $('#conferences').html(newConferences);
        },
        error: function(error) {
            console.log(error.status)
        }
    });
});

Метод, связанный с маршрутом category.conferences:

public function WhereHasCategory(Request $request)
{
    $query = Conference::query();

    if ($request->id) {
        $query->whereHas('categories', function ($q) use ($request) {
            $q->where('category_id', $request->id);
        });
    } else {
        $query->orderBy('id', 'desc')->take(8);
    }
    $conferences = $query->get();
    return response()->json($conferences);
}

// Список с некоторыми городами, чтобы показать все города, с которыми связаны конференции:

<ul class="modal-list row">
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a  name="city" id="">Country</a>
    </li>
    @foreach($cities as $city)
        <li class="col-lg-4 col-md-6 col-sm-12">
            <a name="city" id="{{$city}}">{{$city}}</a>
        </li>
    @endforeach
</ul>

Когда щелкают по городу, у меня есть некоторый jQuery, чтобы показать в div #conferences конференции, которые будут реализованы в этом выбранном городе:

$("a[name='city']").on('click', function(){

    $('#showCities').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');

    var city = $(this).attr("id");

    $.ajax({
        url: '{{ route('city.conferences',null) }}/' + city,
        type: 'GET',
        success:function(result){
            $('#modal2').modal('hide');
            $('#conferences').empty();
            var newConferences='';
            var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
            $.each(result, function(index, conference) {

                newConferences += '<div>\n' +
'                        <div>\n' +
'                            <div>\n' +
'                                <h5>'+conference.name+'</h5>\n' +
'                            </div>\n' +
'                    </div></div>\n';
            });
            $('#conferences').html(newConferences);

        },
        error: function(error) {

            console.log(error.status)
        }
    });
});

Метод, связанный с маршрутом city.coneferences:

public function getConferencesOfCity($slug)
    {
        $conferences = Conference::whereCity($slug)->take(8)->orderBy('start_date', 'asc')->get();

        return response()->json($conferences);
    }
0
0
64
1

Ответы 1

Похоже, что когда вы обновили AJAX, ваш текущий слушатель событий ничего не знает о новых элементах DOM.

Чтобы решить вашу проблему, просто убедитесь, что вы слушаете все дерево:

$("body").on('click', "a[name='category']", function(){
   // Your code is here
})

Спасибо, нужно также использовать то же самое для города? Как "$ (" body "). On ('click'," a [name = 'city'] ", function () {"?

user10178413 10.08.2018 15:46

Его важно использовать для любого динамического контента. Если содержание меняется, то да. Это будет зависеть от вашего кода.

Ilia 10.08.2018 15:49

Спасибо, но не работает, поиск работает индивидуально. Если пользователь выбирает определенную категорию, а затем город, то отображаются только конференции города, по которому щелкнули мышью, без учета ранее выбранной категории.

user10178413 10.08.2018 15:50

Джон, сложно сказать, потому что я понятия не имею, что ты делаешь и как.

Ilia 10.08.2018 16:00

Другие вопросы по теме