时间戳

首页 > 解决方案 > 为什么两个搜索的组合不起作用？

php - 为什么两个搜索的组合不起作用？

问题描述

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

这工作正常。

问题：问题在于两个搜索的组合。例如，如果用户没有刷新页面，则先点击特定类别，然后点击特定城市。例如，如果用户单击类别“大数据”和城市“纽卡斯尔”，它应该出现在#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);
    }

标签： phplaravel

解决方案

看起来当您通过AJAX进行更新时，您当前的事件侦听器对新的 DOM 元素一无所知。

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

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

推荐阅读