1114

我有一个input type="image". 这就像 Microsoft Excel 中的单元格注释。input-image如果有人在与之配对的文本框中输入一个数字，我会为input-image. 然后，当用户单击 时image，他们会弹出一个小窗口来为数据添加一些注释。

我的问题是，当用户在文本框中输入零时，我需要禁用input-image的事件处理程序。我尝试了以下方法，但无济于事。

$('#myimage').click(function { return false; });
4

19 回答 19

1734

jQuery ≥ 1.7

从 jQuery 1.7 开始，事件 API 已经更新，.bind()/.unbind()仍然可用于向后兼容，但首选方法是使用on() / off()函数。下面是现在，

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

jQuery < 1.7

在您的示例代码中，您只是向图像添加另一个单击事件，而不是覆盖前一个：

$('#myimage').click(function() { return false; }); // Adds another click event

两个点击事件都会被触发。

正如人们所说，您可以使用 unbind 删除所有点击事件：

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

如果要添加单个事件然后将其删除（不删除可能已添加的任何其他事件），则可以使用事件命名空间：

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

并仅删除您的活动：

$('#myimage').unbind('click.mynamespace');
于 2008-10-16T21:13:55.117 回答
64

回答此问题时不可用，但您也可以使用live()方法启用/禁用事件。

$('#myimage:not(.disabled)').live('click', myclickevent);

$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

这段代码会发生什么，当您单击#mydisablebutton 时，它会将禁用的类添加到#myimage 元素中。这将使选择器不再与元素匹配，并且在删除“禁用”类使 .live() 选择器再次有效之前不会触发事件。

通过添加基于该类的样式，这还有其他好处。

于 2009-07-23T17:57:10.947 回答
40

这可以通过使用 unbind 函数来完成。

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

您可以将多个事件处理程序添加到 jquery 中的同一对象和事件。这意味着添加新的不会取代旧的。

有几种更改事件处理程序的策略，例如事件命名空间。在线文档中有一些关于此的页面。

看看这个问题（这就是我了解 unbind 的方式）。答案中有对这些策略的一些有用描述。

如何在 jquery 中读取绑定的悬停回调函数

于 2008-10-16T15:35:09.747 回答
39

如果您只想响应一次事件，以下语法应该非常有用：

 $('.myLink').bind('click', function() {
   //do some things

   $(this).unbind('click', arguments.callee); //unbind *just this handler*
 });

使用arguments.callee，我们可以确保删除一个特定的匿名函数处理程序，从而为给定事件拥有一个时间处理程序。希望这对其他人有帮助。

于 2011-08-05T07:29:01.517 回答
36

也许 unbind 方法对你有用

$("#myimage").unbind("click");
于 2008-10-16T15:31:02.110 回答
31

我必须使用 prop 和 attr 将事件设置为 null。我不能用其中一个来做。我也无法让 .unbind 工作。我正在研究一个 TD 元素。

.prop("onclick", null).attr("onclick", null)
于 2012-03-28T14:44:31.650 回答
14

如果事件以这种方式附加，并且目标是未附加的：

$('#container').on('click','span',function(eo){
    alert(1);

    $(this).off(); //seams easy, but does not work

    $('#container').off('click','span'); //clears click event for every span

    $(this).on("click",function(){return false;}); //this works.

});​
于 2012-06-26T13:02:06.530 回答
11

您可能会将onclick处理程序添加为内联标记：

<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />

如果是这样，jquery .off()or.unbind()将无法正常工作。您还需要在 jquery 中添加原始事件处理程序：

$("#addreport").on("click", "", function (e) {
   openAdd();
});

然后 jquery 有一个对事件处理程序的引用，并且可以将其删除：

$("#addreport").off("click")

VoidKing 在上面的评论中稍微倾斜地提到了这一点。

于 2014-01-21T22:25:16.247 回答
10

对remove 所有人 event-handlers来说，这对我有用：

删除所有事件处理程序意味着拥有HTML structure没有所有event handlers附加到element及其child nodes. 要做到这一点，jQuery's clone()帮助。

var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $('#my-div');
clone = original.clone();
//
original.replaceWith(clone);

有了这个，我们将用 noclone代替。originalevent-handlers

祝你好运...

于 2017-12-12T07:18:42.980 回答
10

如果您使用$(document).on()将侦听器添加到动态创建的元素，则可能必须使用以下内容将其删除：

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");
于 2019-05-27T02:50:01.440 回答
9

2014 年更新

使用最新版本的 jQuery，您现在只需执行以下操作即可取消绑定命名空间上的所有事件$( "#foo" ).off( ".myNamespace" );

于 2014-02-05T11:39:27.707 回答
8

删除内联 onclick 事件的最佳方法是$(element).prop('onclick', null);

于 2015-01-02T14:43:04.697 回答
7

谢谢你提供的详情。非常有帮助，我用它来锁定另一个用户在编辑模式下的页面交互。我将它与 ajaxComplete 结合使用。不一定是相同的行为，但有些相似。

function userPageLock(){
    $("body").bind("ajaxComplete.lockpage", function(){
        $("body").unbind("ajaxComplete.lockpage");
        executePageLock();      
    });
};  

function executePageLock(){
    //do something
}
于 2010-07-02T21:54:25.443 回答
6

如果.on()方法以前与特定选择器一起使用，如下例所示：

$('body').on('click', '.dynamicTarget', function () {
    // Code goes here
});

unbind()和.off()方法都不起作用。

但是，.undelegate()方法可用于从事件中完全删除与当前选择器匹配的所有元素的处理程序：

$("body").undelegate(".dynamicTarget", "click")
于 2016-06-27T10:11:19.453 回答
3

这也可以正常工作。简单易行。请参阅http://jsfiddle.net/uZc8w/570/

$('#myimage').removeAttr("click");
于 2013-06-15T12:31:23.850 回答
3

我知道这来晚了，但为什么不使用纯 JS 来删除事件呢？

var myElement = document.getElementById("your_ID");
myElement.onclick = null;

或者，如果您使用命名函数作为事件处理程序：

function eh(event){...}
var myElement = document.getElementById("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it
于 2016-09-05T14:24:30.553 回答
2

如果你设置onclick你html需要removeAttr ($(this).removeAttr('onclick'))

如果您通过 jquery 设置它（在我上面的示例中第一次单击之后），那么您需要unbind($(this).unbind('click'))

于 2014-09-02T06:53:48.980 回答
1

所描述的所有方法都对我不起作用，因为我正在将 click 事件添加on()到在运行时创建元素的文档中：

$(document).on("click", ".button", function() {
    doSomething();
});


我的解决方法：

由于我无法取消绑定“.button”类，我只是将另一个类分配给具有相同 CSS 样式的按钮。通过这样做，live/on-event-handler 最终忽略了点击：

// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");

希望有帮助。

于 2014-02-12T08:00:07.117 回答
1

希望我下面的代码能解释一切。HTML：

(function($){

     $("#btn_add").on("click",function(){
       $("#btn_click").on("click",added_handler);
       alert("Added new handler to button 1");
     });

  
 
     $("#btn_remove").on("click",function(){
       $("#btn_click").off("click",added_handler);
       alert("Removed new handler to button 1");
     });

  
   function fixed_handler(){
    alert("Fixed handler");
  }
  
   function added_handler(){
    alert("new handler");
  }
  
  $("#btn_click").on("click",fixed_handler);
  $("#btn_fixed").on("click",fixed_handler);
  
  
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
  <button id="btn_add">Add Handler</button>
  <button id="btn_remove">Remove Handler</button>
  <button id="btn_fixed">Fixed Handler</button>

于 2015-12-22T08:28:44.543 回答