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 = "Please enter a donation amount"
            $('#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属性设置为on / off来切换输入的状态（不需要克隆和隐藏它）。

无法使用jquery取消绑定元素

1 个答案: