Question

使用jQuery，我想在不更改给定按钮的disabled属性的情况下，禁用所有点击事件。

我正在考虑检索点击事件处理程序，取消绑定它们并存储它们（例如，使用data()）。

然后，一旦再次启用按钮，我就可以重新绑定它们。

Answer 1

不难做到，因为jQuery已经将所有事件处理程序作为data()存储在元素本身上。您可以通过.data().events获取（并修改）此对象。

现在，您可以使用以下命令轻松保存对处理程序的引用：

 events._click = events.click;
 events.click = null;

然后使用以下命令恢复它们：

 events.click = events._click;
 events._click = null;

请注意，这不会禁用通过.delegate()或.live()绑定的事件，因为它们通过事件冒泡/传播来工作。要禁用它们，只需绑定一个阻止传播到祖先元素的新处理程序：

 events._click = events.click;
 events.click = null;
 // Block .live() and .delegate()
 $("#el").click(function (e) {
     e.stopPropagation();
 });

当需要再次启用处理程序时，您甚至不需要取消绑定此阻止函数，因为events.click = events._click将覆盖您刚刚与所有旧处理程序绑定的函数。

Answer 2

这是另一种方式：

$("#myButton").click(function() {
    if ($(this).attr("temp_disable") == "disabled") {
        //nothing to do, temporarily disabled...
    }
    else {
        alert("You clicked me!");
    }
});

要“禁用”它10秒钟：

$("#myButton").attr("temp_disable", "disabled");
window.setTimeout(function() { $("#myButton").attr("temp_disable", ""); }, 10000);

实时测试案例：http://jsfiddle.net/yahavbr/ByM6h/

Answer 3

这是要走的路。如果您将onclick指定为属性，则可以切换属性总线

 $(button_element).attr('click', '');

和

 $(button_element).attr('click', 'do_the_regular_action()');

Answer 4

此处的所有答案现已过时 - 从jQuery 1.7开始，您应使用.off()解释on the official jQuery site

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>off demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
 
<script>
function flash() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Does nothing..." );
});
</script>
 
</body>
</html>

＆＃13;

Answer 5

您可以使用unbind和bind

$('#control').unbind('click');

和

$('#control').bind('click', NameOfFunctionToCall);

Answer 6

我将扩展Barry和Thariama提供的答案......我认为这将满足Ovesh的反对意见：

您可以为事件绑定添加命名空间。这使您可以在以后引用该特定事件绑定，而不会与其他绑定发生冲突。我认为这比接受的答案更清晰......（公平地说，在原始问题时，这可能不是jQuery中提供的。）

// A generic click handler:
$('.myButton').click(function() { ... });

// A namespaced click handler:
$('.myButton').bind('click.someSituation', function()  { ... });

// Later you can unbind only the handler you want by using the namespace:
$('.myButton').unbind('click.someSituation');

// The default click handler still works.

Answer 7

而不是做这件事使用Core Javascript来完成这项任务例如请看下面的例子。

function MakeSaveDisabled(flg) {
    if (flg != null) {
        $(".btnpost").each(function () {
            this.removeAttribute("disabled");
            if (this.hasAttribute("oclickevt")) {
                this.setAttribute("onclick", this.getAttribute("oclickevt"));
            }
        });
    }
    else {
        $(".btnpost").each(function () {
            this.setAttribute("disabled", "true");
            if (this.getAttribute("onclick") != null) {
                this.setAttribute("oclickevt", this.getAttribute("onclick"));
            }
            this.removeAttribute("onclick");
        });
    }
}

将javascript函数保存在某个临时属性中，并在需要时绑定它。

Answer 8

您可以保存事件然后将其还原，这似乎可行（请注意，根据JQuery的版本，可能需要省略_）。

此示例停止启动Bootstrap触发器的on-change事件，然后触发该触发器，然后将事件重置为以前的事件。您可以通过单击等进行相同操作。

var events;
// Save change events associated with this control
events = $._data($(this)[0], "events").change;
$._data($(this)[0], "events").change = null;

// Do your stuff here
$(this).bootstrapToggle("off");

// Reset change events
$._data($(this)[0], "events").change = events;

如何暂时禁用按钮上的点击事件而不实际禁用它？

8 个答案: