Question

我有一个包含两个列表的页面：

一个列表包含一些列表项，每个列表项都对应一个类别，当单击一个类别时，在#conferences div中会出现属于该单击的类别的会议
另一个列表中有一些城市，当单击一个城市时，在#conferences div中会出现在“ city”列中具有所单击城市的值的会议。

这很好。

问题：问题出在两次搜索的结合中。例如，如果用户不刷新页面，则首先单击特定类别，然后单击特定城市。例如，如果用户在类别“大数据”中单击，在城市“纽卡斯尔”中单击，则它应出现在#conferences div中，这些会议属于所单击的类别（大数据），并且在会议中具有值“纽卡斯尔”列“城市”。但这是行不通的。你知道达到这个目标需要什么吗？

//具有类别的列表

<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在#conferences div中显示属于该单击类别的最后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在#conferences div中显示将在该点击的城市上实现的会议：

$("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);
    }

Answer 1

当您通过 AJAX 更新时，当前事件监听器对新的DOM元素一无所知。

为了解决您的问题，只需确保您正在听整棵树：

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

为什么两种搜索组合无效？

1 个答案: