Question

我在页面上有复选框输入，并使用ajax过滤结果。

一个搜索选项为type，vendors选项会根据所选的type进行更新。但这意味着用于更新实际结果的更改功能不再适用于document.ready()。为了纠正这个问题，我还在.ajaxComplete()内调用了该函数。

但是当在ajaxComplete()内调用ajax调用时，它会导致无限循环并导致网站崩溃。

$(document).ready(function(){
 $('input[type=radio]').change(function(){

  var type = $(this).attr('data-id');
  $.ajax({
     method: 'POST',
     url: 'assets/ajax/update-filters.php',
     data: {type : type},
     success: function(data)
     {
        $('#vendor-filter input[type=checkbox]').prop('checked', false);
        vendors = [];
        $('#vendor-filter').empty();
        $('#vendor-filter').html(data);
     }

 });

 $('#vendor-filter input[type=checkbox]').change(function(){
    filterResults(this);
 });

});

$(document).ajaxComplete(function(){

  $('#vendor-filter input[type=checkbox]').click(function(){
        filterResults(this);
  });

});



function filterResults($this)
{
    var type = $('input[type=radio]:checked').attr("data-id");

    var vendor = $($this).attr('data-id');
    if($($this).prop('checked'))
    {
        var action = 'add';
        vendors.push(vendor);
    }
    else
    {
        var action = 'remove';
        var index = vendors.indexOf(vendor);
        if(index >= 0)
        {
            vendors.splice(index, 1);
        }
    }

    $.ajax({
        method: 'POST',
        url: 'assets/ajax/filter-results.php',
        data: {'vendor' : vendor, 'action' : action, 'vendors' : vendors, 'filter_type' : type},
        success: function(data)
        {
            $('#results').empty();
            if(action == 'add')
            {
                window.history.pushState("", "Title", window.location.href+"&v[]="+vendor);
            }
            else if(action == 'remove')
            {
                var newUrl = window.location.href.replace("&v[]="+vendor, "");
                window.history.replaceState("", "Title", newUrl);
            }

            $('#results').html(data);
        }
    });
}

如果先通过ajax调用输入复选框并且没有导致带有.ajaxComplete（）的循环，如何让.change函数仍然有效？

非常感谢任何帮助。感谢

需要能够在document.ready（）之后加载元素来运行ajax调用

0 个答案: