javascript - 如何删除jquery中先前绑定(bind)的事件

Question

在复选框更改事件中，其中一个 JavaScript 会绑定(bind)切换操作。

稍后(在不同的脚本中)我想根据条件更改切换操作。

例如。脚本1:

$(document).ready(function () {
    var shipFields = $('.address1 input');

    $("input[name = 'same_as_bill']").on("change", function (evt) {
        toggleFields(shipFields, !$(this).is(":checked"));
    });

   function toggleFields(fields, show) {
        var inputFields = $("li", fields).not(".sameas, .triggerWrap");
        inputFields.toggle(show);
    }
}

脚本2:

$(document).ready(function () {

    $('li.sameas input').click(function (sender) {

          var target = $(sender.target);
          var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();

          // determine data method based on country selected
          if (selectedCountryValue === "xxx") {
              ShowAddress(true, target);
          } else {
             ShowAddress(false, target);
          }
    });

    function kleberShowAddress(show, target) {
          if (show) {
               $('li.address).hide();
          } else {
               $('li.address).show();
          }
     }
});

我这里遇到的问题是，我的网站首先加载脚本 1，然后加载脚本 2。因此，当脚本 2 执行该操作时，切换操作已排队，并会在脚本 2 发生更改后触发该操作，这将恢复我想要的改变。

有没有办法删除队列中的操作？或停止发生第一个请求。我不想使用 .unbind() ，它将停止触发脚本 1 函数。我只想在满足脚本 2 中的条件时停止该操作。

请注意:以上函数已被 trim 以显示更少的代码。

Answer 1

添加 var isActive = true; 并使用它来 checkin 第一个脚本。在脚本 2 中，您可以随时调用 isActive = false 禁用第一个脚本的功能，或调用 isActive = true 重新启用它们。

您的代码将如下所示:

//script1    
var isActive = true;
$(document).ready(function() {
    var shipFields = $('.address1 input');

    $("input[name = 'same_as_bill']").on("change", function(evt) {
        if (isActive) {
            toggleFields(shipFields, !$(this).is(":checked"));
        }
    });

    function toggleFields(fields, show) {
        if (isActive) {
            var inputFields = $("li", fields).not(".sameas, .triggerWrap");
            inputFields.toggle(show);
        }
    }
});

//script2
$(document).ready(function() {
    isActive = false;

    $('li.sameas input').click(function(sender) {

        var target = $(sender.target);
        var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();

        // determine data method based on country selected
        if (selectedCountryValue === "xxx") {
            ShowAddress(true, target);
        } else {
            ShowAddress(false, target);
        }
    });

    function kleberShowAddress(show, target) {
        if (show) {
            $('li.address').hide();
        } else {
            $('li.address').show();
        }
    }
});