在 jQuery 中移除事件处理程序的最佳方法?

I have an input type="image". This acts like the cell notes in Microsoft Excel. If someone enters a number into the text box that this input-image is paired with, I setup an event handler for the input-image. Then when the user clicks the image, they get a little popup to add some notes to the data.

My problem is that when a user enters a zero into the text box, I need to disable the input-image's event handler. I have tried the following, but to no avail.

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

转载于:https://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery

17个回答

jQuery ≥ 1.7

With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions. The below would now be,

$('#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

In your example code you are simply adding another click event to the image, not overriding the previous one:

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

Both click events will then get fired.

As people have said you can use unbind to remove all click events:

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

If you want to add a single event and then remove it (without removing any others that might have been added) then you can use event namespacing:

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

and to remove just your event:

$('#myimage').unbind('click.mynamespace');
csdnceshi71
Memor.の deserves my vote up!!!
大约 2 年之前 回复
csdnceshi50
三生石@ See jwhittenburg's comment below re DOM object having inline onclick="doFoo" - use .prop("onclick", null).attr("onclick", null)
大约 3 年之前 回复
csdnceshi61
derek5. removeAttr('onclick') worked for me.
4 年多之前 回复
weixin_41568131
10.24 if a button has attrib onclick="return false;" its jQuery click listener is still being fired..is that correct?
4 年多之前 回复
csdnceshi77
狐狸.fox this one is a hack::: cleaning up all the events from the element regardless if they have set using .on(..) or even native .onclick = --- clone the element with .cloneNode(true) hide the original element, insert the copied one before it, optionally removing the original element afterwards.
5 年多之前 回复
weixin_41568110
七度&光 just struck my comment from the record, it was three years old. on/off is the way to go.
6 年多之前 回复
csdnceshi60
℡Wang Yan I believe @theOther is stating a preference for bind() over click(), not bind() over on(). on/off have replaced bind/unbind as the preferred method in jQuery since 1.7 as stated above. I don't know what the closure compiler is so can't really comment on that.
6 年多之前 回复
weixin_41568174
from.. mentions closure compiler but I'm not sure what this means nor whether this is the correct/only reason. thanks
6 年多之前 回复
csdnceshi54
hurriedly% Using .unbind() helped me in a situation where I was toggling a bunch of checkboxes, but relized i was re-adding the .click() handler repeatedly, causing the app to hang.
6 年多之前 回复
csdnceshi60
℡Wang Yan Yes they do, so yes, if you wanted to clear all other click events and then add your own you could do the above chained call.
接近 8 年之前 回复
weixin_41568208
北城已荒凉 Old answer -also like the the included namespace information- but I forget; does on/off return the jQ object? If so, perhaps a more complete answer would be to daisy chain: $('#myimage').off('click').on('click',function(){...})
接近 8 年之前 回复
csdnceshi60
℡Wang Yan Well if both events are still firing then obviously its not working. You'd have to give more info to get a proper answer. Try asking a separate question.
大约 10 年之前 回复
csdnceshi70
笑故挽风 Is there a way to test if unbind() is working? I've added it and both events are still firing.
大约 10 年之前 回复

Updated for 2014

Using the latest version of jQuery, you're now able to unbind all events on a namespace by simply doing $( "#foo" ).off( ".myNamespace" );

You may be adding the onclick handler as inline markup:

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

If so, the jquery .off() or .unbind() won't work. You need to add the original event handler in jquery as well:

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

Then the jquery has a reference to the event handler and can remove it:

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

VoidKing mentions this a little more obliquely in a comment above.

If event is attached this way, and the target is to be unattached:

$('#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.

});​

This also works fine .Simple and easy.see http://jsfiddle.net/uZc8w/570/

$('#myimage').removeAttr("click");

This can be done by using the unbind function.

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

You can add multiple event handlers to the same object and event in jquery. This means adding a new one doesn't replace the old ones.

There are several strategies for changing event handlers, such as event namespaces. There are some pages about this in the online docs.

Look at this question (that's how I learned of unbind). There is some useful description of these strategies in the answers.

How to read bound hover callback functions in jquery

I had to set the event to null using the prop and the attr. I couldn't do it with one or the other. I also could not get .unbind to work. I am working on a TD element.

.prop("onclick", null).attr("onclick", null)
csdnceshi56
lrony* Im with the "unbind() didnt work for me" crowd, but this did, and I'm using latest jquery. Go figure
5 年多之前 回复
weixin_41568174
from.. Here's a like from someone who has just spent an hour to discover that properties added via jQuery don't show on Chrome's element panel. Been trying unbind and off and it wasn't solving the problem. Thank you very much!
大约 6 年之前 回复
csdnceshi62
csdnceshi62 I think the reason the above methods didn't work for you guys is because of how you set it up. If you wrote the event handler into the DOM then yes, clearing this attribute is necessary to clear the event handler, however, I think most people (including myself) wish to keep such things (javascrip, event handlers, etc.) out of the DOM, so when we want to set up an event handler we use something like $("#elementId").click(function(){//Event execution code goes here}); so that it is not in the html page at all. To clear that we actually need to use .unbind(), or the preferred .off()
7 年多之前 回复
csdnceshi65
larry*wei same here. unbind and off didn't work for me on FF with jq 1.7.2 and .prop("onclick", null) was also sufficient in my case
7 年多之前 回复
csdnceshi59
ℙℕℤℝ Same here! i tried to remove click event from simple <a> tag! Thanx for this. In my case .prop("onclick", null) was enough.
大约 8 年之前 回复
csdnceshi53
Lotus@ I voted this up because I've been trying to unbind an onblur for about 30 mintues. '.unbind' didn't work, '.prop' didn't work, '.attr' didn't work, but this trick with both .prop and .attr together did the trick. odd. I'm using Chrome with jquery 1.7.2
8 年多之前 回复

In case .on() method was previously used with particular selector, like in the following example:

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

Both unbind() and .off() methods are not going to work.

However, .undelegate() method could be used to completely remove handler from the event for all elements which match the current selector:

$("body").undelegate(".dynamicTarget", "click")

if you set the onclick via html you need to removeAttr ($(this).removeAttr('onclick'))

if you set it via jquery (as the after the first click in my examples above) then you need to unbind($(this).unbind('click'))

Hope my below code explains all. 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>

</div>
csdnceshi59
ℙℕℤℝ Good question Bryan. This method has been entered in my gene due to practice. - There can be some possibility for non jquery plugin to have the variable $, hence I cannot use $ directly. - Frequent use of the word "jQuery" in an js script file can increase the byte size of the file, where jQuery is a 6 byte string. Hence I prefer to use "$" or any variable of single byte.
接近 5 年之前 回复
csdnceshi66
必承其重 | 欲带皇冠 why are you passing in })(jQuery); into the IIFE when it can already be accessed globally?
接近 5 年之前 回复
共17条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐