为什么两次搜索的组合不起作用？

I have a page with two lists:

• one list have some list items, each list item corresponds to a category, when a category is clicked, in the #conferences div appear the conferences that belongs to that clicked category
• the other list have some cities, when a city is clicked, in the #conferences div appear the conferences that have in the column "city" the value of the clicked city

This is working fine.

Issue: The issue is in the combination of the two searches. For example, if the user without refreshing the page, first clicks in a specific category and then in a specific city. For example if the user click in the category "Big Data" and in the city "Newcastle" it should appear in the #conferences div the conferences that belong to the clicked category (Big Data) and that have the value "Newcastle" in the column "city". But this is not working. Do you know what is necessary to achieve that?

// list with categories

<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>

When a category is clicked I have the jQuery below to show in the #conferences div the last 8 conferences that belong to that clicked category.

$("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>
' +
'                        <div>
' +
'                            <img src='+ imageUrl +' alt="Card image cap">
' +
'                            <div>
' +
'                                <h5>'+conference.name+'</h5>
' +
'                            </div>
' +
'                    </div></div>';
            });

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

Method associated with the 'category.conferences' route:

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);
}

// List with some cities to show all cities that have conferences associated with it:

<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>

When a city is clicked I have some jQuery to show in the #conferences div the conferences that will realize on that clicked city:

$("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>
' +
'                        <div>
' +
'                            <div>
' +
'                                <h5>'+conference.name+'</h5>
' +
'                            </div>
' +
'                    </div></div>
';
            });
            $('#conferences').html(newConferences);

        },
        error: function(error) {

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

Method associated with the 'city.coneferences' route:

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

        return response()->json($conferences);
    }

It looks that as you updated over AJAX, your current event listener knows nothing about new DOM elements.

In order to fix your issue, just make sure that you are listening on the whole tree:

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