The jQuery .off() API can only remove the event that was added by using its own on(or bind in jQuery) method, many third-party plugins may add events using pure javascript and because of browser compatibility issues, is there any single line of code that can do this stuff more easily?
If the event handler was added with .addEventListener(), then the only way to remove it is with .removeEventListener() and this means that you need to know the handler function too in order to use .removeEventListener() so if an anonymous function was used as the handler, then there is no way to remove the event listener.
In some circumstances, a heavy handed way to clear all event listeners off a DOM element is to replace it with a new element of the same type (perhaps preserving child elements while doing so). This is obviously a blunt instrument because it will clear all state that was associated with the prior DOM element.
If the event is added by jQuery.on(), you can remove it with jQuery.off().
If the event is added by jQuery.bind(), you can remove it with jQuery.unbind().
If the event is added by pure .addEventListener() in pure javascript , you can remove it with .removeEventListener() .
If event is added by plugin, so you won't be knowing the method how event was added, so to make sure that events are removed, you need to clear the DOM element and create a new element identical to the one that is deleted...
I'm curious to know the differences between the bind and live functions.
To me they seem to be almost identical.
I read the benefits of live/bind methods, but it didn't tell me about the differences...
Thanks!
In short: .bind() will only apply to the items you currently have selected in your jQuery object. .live() will apply to all current matching elements, as well as any you might add in the future.
The underlying difference between them is that live() makes use of event bubbling. That is, when you click on a button, that button might exist in a <p>, in a <div>, in a <body> element; so in effect, you're actually clicking on all of those elements at the same time.
live() works by attaching your event handler to the document, not to the element. When you click on that button, as illustrated before, the document receives the same click event. It then looks back up the line of elements targeted by the event and checks to see if any of them match your query.
The outcome of this is twofold: firstly, it means that you don't have to continue reapplying events to new elements, since they'll be implicitly added when the event happens. However, more importantly (depending on your situation), it means that your code is much much lighter! If you have 50 <img> tags on the page and you run this code:
$('img').click(function() { /* doSomething */ });
...then that function is copied into each of those elements. However, if you had this code:
$('img').live('click', function() { /* doSomething */ });
...then that function is stored only in one place (on the document), and is applied to whatever matches your query at event time.
Because of this bubbling behaviour though, not all events can be handled this way. As Ichiban noted, these supported events are click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
.bind() attacheds events to elements that exist or match the selector at the time the call is made. Any elements created afterwards or that match going forward because the class was changed, will not fire the bound event.
.live() works for existing and future matching elements. Before jQuery 1.4 this was limited to the following events: click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Bind will bind events to the specified pattern, for all matches in the current DOM at the time you call it. Live will bind events to the specified pattern for the current DOM and to future matches in the DOM, even if it changes.
For example, if you bind $("div").bind("hover", ...) it will apply to all "div"s in the DOM at the time. If you then manipulate the DOM and add an extra "div", it won't have that hover event bound. Using live instead of bind would dispatch the event to the new div as well.
Nice read on this: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
Is nowadays (since jQuery 1.7) deprecated using the .on() function - http://api.jquery.com/on/
imagine this scenario:
i have several <img> elements.
$('img').bind('click', function(){...});
add some extra images (using get(), or html(), anything)
the new images don't have any binding!!
of course, since the new images didn't exist when you did the $('img')... at step 2, it didn't bind the event handler to them.
now, if you do this:
i have several <img> elements.
$('img').live('click', function(){...});
add some extra images (using get(), or html(), anything)
the new images do have the binding!!
magic? just a little. in fact jQuery binds a generic event handler to another element higher in the DOM tree (body? document? no idea) and lets the event bubble up. when it gets to the generic handler, it checks if it matches your live() events and if so, they're fired, no matter if the element was created before or after the live() call.
In adition to what they said, I think it's best to try to stick to bind when/where you can and use live only when you must.
All these jQuery methods are used for attaching events to selectors or elements. But they all are different from each other.
.bind(): This is the easiest and quick method to bind events. But the issue with bind() is that it doesn’t work for elements added dynamically that matches the same selector. bind() only attach events to the current elements not future element. Above that it also has performance issues when dealing with a large selection.
.live(): This method overcomes the disadvantage of bind(). It works for dynamically added elements or future elements. Because of its poor performance on large pages, this method is deprecated as of jQuery 1.7 and you should stop using it. Chaining is not properly supported using this method.
Find out more here
I wanted to add to this after having to debug a bit due to my own silliness. I applied .live() to a class of button on my page, assuming that it would just render out the correct ID I was trying to pass on the query string and do what I wanted to do with the ajax call. My app has dynamically added buttons associated with an inventory item. For instance, drill down categories to the 'COKE' button to add a coke to your order. Drill down from the top again, and add 'BUDLITE' - each time I wanted those items to be entered into a table via an AJAX call.
However, since I bound .live() to the entire class of buttons, it would remember each ajax call I had made and re-fire it for each subsequent button! It was a little tricky because I wasn't exactly clear on the difference between bind and live (and the answer above is crystal about it), so I figured I'd put this here just in case somebody was doing a search on this stuff.
There is a way to get the live effect but its kind of nasty.
$(this).unbind('mouseout').bind('mouseout',function(){
});
this will clear the previous and reset the new. It has seemed to work fine for me over time.
Difference between live and livequery is discussed here .
I have <video> elements added to the page when an image is clicked. A light box with the video pops up. What would be the best way to execute a snippet of jquery to this dynamic video element? I though maybe some form of the .on method might work was not sure.
Edit: I'm using ilightbox for the lightbox which has code that adds in a html video after a lightbox image is clicked.
.on working good for new element in Document object model(DOM)
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()
reference on
Is there a good way to get around IE7 producing "Error: Failed" when events are triggered on dynamically created SVG elements (such as those created by raphael.js)?
I think the "Error: Failed" are being produced when jQuery looks through my live handlers to check and see if the SVG element matches any of the live selectors I've specified... for now I manually bind functions that call
e.stopPropagation();
for every event (mouseenter, mouseleave, click, etc.) on my SVGs produced by raphael.
I couldn't find a good way to prevent this jQuery issue.
So what I ened up doing was capturing the events in Raphael.js and calling e.stopPropagation(); then I used IE's fireEvent to start the event again on the parent element of the VML/SVG element. A bit of a hack, but it works for now.
I found that using Brandon Aaron's "livequery" plugin in place of jQuery's native "live" method for any live bindings to the "change" event solved this problem.
See:
hakoniemi
jQuery Bug
I am using in my project slider Class from ExtJS. Me on the onkeypress event to perform some action. Everything would have been nice if it were not for slider. He also uses the event only onkeypress. Question: how to delete this event? I have tried in terms of the .mun - it did not work. Any Ideas?
Example: http://www.jsfiddle.net/3ZLFV/32/
Have you tried explicitely setting the onkeypress event handler for the slider and having it simply return true? This should allow natural event propogation to take place.
in jQuery
$('#slider').unbind();