无法使用 jquery 取消绑定元素

Question

我正在开发一个创建此 jquery 事件的项目：

$('input.checkout-continue:not(.checkout-processed)', context).addClass('checkout-processed').click(function() {
      var $this = $(this);
      $this.clone().insertAfter(this).attr('disabled', true).next().removeClass('element-invisible');
      $this.hide();
    });

这可以防止用户单击提交按钮两次。 我写了一个提交事件，我需要暂时取消绑定该事件并在完成后将其重新打开。 （我需要这样做，否则，在我单击提交后，按钮会冻结并且没有响应。）我尝试从这个开始：

$('input.checkout-continue:not(.checkout-processed)').unbind("click");
        $('#commerce-checkout-form-checkout').submit(function() {
          if($('#donation-amount-selection-form .form-item-donation-amount').val() == "" &&
             $('#donation-amount-selection-form .form-item-donation-custom-amount').val() == "") {
            var message = "请输入捐款金额"
            $('#donation-amount-selection-form').prepend(message);
            event.preventDefault();
          }

但它没有解除绑定，提交按钮保持冻结状态。

Answer 1

该事件没有解除绑定，因为选择器：'input.checkout-continue:not(.checkout-processed) 仅用于选择没有 .checkout-processed CSS 类的元素。该类是在开头添加的：

$('input.checkout-continue:not(.checkout-processed)', context).addClass('checkout-processed');

为了解除对input.checkout-continue的点击，最好缓存jQuery对象，以便以后可以引用它而无需重新查询DOM。

// Caches the selector since we'll use it to bind and unbind.
var $input = $('input.checkout-continue:not(.checkout-processed)');

var onClick = function () {

  // Caches the clicked element.
  var $this = $(this);

  $this.attr('disabled', true);

  // After some time, re-enable the button but unbind the click event.
  window.setTimeout(function () {
    $this.attr('disabled', false);
    $input.unbind('click', onClick);
  }, 3000);

};

$input.bind('click', onClick);

Live Demo

在本例中，我们只需将disabled 属性设置为开/关即可切换输入的状态（无需克隆和隐藏）。