jquery - 触发 change() 事件以刷新选择框会导致重新触发实时更改事件

Question

我正在做的事情很简单，所以我可能做错了。

我有一个简单的选择框作为表格的过滤器。我有一个重置过滤器的按钮。

$("#package").live('change', function()
{   
    filterPackage = $("#package").val();

    $.ajax({url: 'ajaxAllGroups.php?filterPackage='+filterPackage, cache: false, success: function(main)
    {
        $('#fullPartsList').html(main);
    }});
});

function unfilter()
{
    $.ajax({url: 'ajaxAllGroups.php?filterPackage=0', cache: false, success: function(main)
    {
        $('#fullPartsList').html(main); // Send ajax content to table

        $('#package').val(0); // Reset option to default
        $("#package").change(); // Force visual change to select box
    }});
}

如您所见，重置按钮将选择选项设置回零，并且我触发了选择上的 change() 函数，以使更改应用于选择框。

一切正常，但仅视觉更改会触发上面的实时更改功能，这会导致第二次不必要的 ajax 调用。

我考虑过使用真/假变量来执行此操作以使其运行一次，但无法让该变量在正确的时间设置真/假，但我相信有一种更简单的方法。

提前致谢。

Answer 1

为什么不在实时操作处理程序中添加一个简单的检查以排除对值 0 的调用。

if(filterPackage!=0)
{
    $.ajax({url: 'ajaxAllGroups.php?filterPackage='+filterPackage, cache: false, success: function(main)
    {
        $('#fullPartsList').html(main);
    }});
}

Answer 2

$(document).on('change', '#package', function() {
    doFilter(this.value);
});

function doFilter(pkg) {
    $.ajax({
        url : 'ajaxAllGroups.php',
        data: {filterPackage: pkg}
    }).done(function(main) {
        $('#fullPartsList').html(main);
    });
}

function unfilter() {
    $('#package').val(0);
    doFilter(0);
}