Is there a way to automatically unbind all "on" events that were set on an element? I have found a solution but i don't know if it is the corect one.
$(document).off('click', 'li').on('click', 'li', function(e){
e.preventDefault();
// some stuff goes here
});
EDIT:
I have tried all the suggested answers but none worked as i wanted. Maybe it was my mistake that i didn't give enough information: the point is that all my content is loaded dynamically like in tabs and some tabs could be loaded more time.
I have tried this $('li').off().on('click', function(){
});
-> did not work
Also have tried this $('li').unbind().on('click', function(){
});
-> did not work.
You can call .unbind() without parameters to do this:
$('li').unbind();
From the docs:
In the simplest case, with no arguments, .unbind() removes all handlers attached to the elements.
As of jQuery 1.7, off() and on() are the preferred methods to bind and unbind event handlers.
So to remove all handlers from an element, use this:
$('li').off();
or for specific handlers:
$('p').off('click hover');
And to add or bind event handlers, you can use
You can just use unbind() or off() to remove all event handlers from an object.
$('#myNode').unbind();
off() is preferred way to do this in jQuery 1.7+ (noted by #Krishna).
$('#myNode').off();
JSFiddle
$('li').off();//Remove all event handlers from all li elements:
$('li').off('click');//Remove specific event - click
From documentation .off(),
The .off() method removes event handlers that were attached with .on().
From .unbind() documentation,
As of jQuery 1.7, the .on() and .off() methods are preferred to attach and remove event handlers on elements.
$('li').unbind(); //removes all event handlers
$('li').unbind('click');//removes specific event - click
Related
I've binded a class as follow,
$(document).on('click','.add-more',function(){
alert('Do Something')
});
My requirement forces me to use .on('click') instead of click, bind('click') etc... Now I want to unbind the click event. Hope my question is clear. Thanks in anticipation for support.
try
$(document).off('click','.add-more');
DEMO
You use .off with the same selector (to avoid removing unrelated things), and possibly the same function (again to avoid removing unrelated things):
// Removes ALL click handlers from `document` that handle `.add-more`
// elements via delegation
$(document).off('click','.add-more');
If you need to be sure just to remove a specific function, you do that:
function handler() {
alert('Do Something')
}
// If previously you did
// $(document).on('click','.add-more',handler);
// then:
$(document).off('click','.add-more',handler);
There, only the specific handler is removed (not other click handlers on document that handle .add-more via delegation).
you can use .off to unbind event bound with .on
$(document).off('click');
here are the full docs
I have one anchor element in my page
Click
I know in jQuery we have so many ways of binding events to element like (bind, live, delegate, on).
FYI:
http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/
Currently using jquery1.8.3.min.js. I want to know which one is standard and efficient event registration model in jQuery?
Currently I am doing it like this:
$("#page").click(function(){
................................
});
Can I change to bind like below code:
$("#page").bind("click",clickFunc);
function clickFunc()
{
..........
}
Which one is best practice to register the event in jQuery 1.8 ?
The best way is the way one can understand what's written and the one that works.
The smart way is to use what's suggested to use, in this case the .on() method:
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()
The how-to way depends if you need to delegate your event/s to dynamically generated elements or not.
$('.child').on( 'click', function() { /* ... */ });
$('#parent').on( 'click', ".dyn-gen-child", function() { /* ... */ });
.on is the standard method:
$("#page").on("click", function() {
.......
});
If the p element is generated dynamically, you'll have to do:
$(document).on("click", "#page", function() {
.......
});
Actually, after jQuery 1.7, on is the preferred way to bind events rather than bind. So I prefer on API.
And then:
click(function(){})
is just the shortcut of
on('click',function(){})
Internally, they are actually the same -- when the on param is event, handler, but on is more general because it can do more than simple onClick(example:event delegation) see:link
so I recommend on
In jQuery how can I watch a div to determine if it has changed so that I can rebind events and perform some other action as needed?
If the div has dynamic content I would like to tell you about event delegation.
Event delegation allows you to avoid adding event listeners to
specific nodes; instead, the event listener is added to one parent.1
To use event delegation in jQuery you use the on method and provide a selector argument.
You could use DOMSubtreeModified event(see here)
$('my-selector').bind('DOMSubtreeModified', function() {
console.log('Children have been modified');
});
I haven't checked the supported nature of this event but in chrome it works.
Unfortunately : Why is the DOMSubtreeModified event deprecated in DOM level 3?
Can I make the following much simpler (instead of using 'undelegate' twice)?
$("#div1").undelegate("div", "mouseenter").undelegate("div", "mouseleave");
I don't want event handlers other than mouseenter and mouseleave to get disturbed.
Split your events with spaces.
$("#div1").undelegate("div", "mouseenter mouseleave");
You should use on and off though.
$("#div1").off("mouseenter mouseleave", "div");
http://api.jquery.com/undelegate/
The .undelegate() method is a way of removing event handlers that have
been bound using .delegate(). As of jQuery 1.7, the .on() and .off()
methods are preferred for attaching and removing event handlers.
In this specific case, you can use the shorthand .hover() for mouseenter and mouseleave.
$("#div1").off("hover", "div");
.off() is the recommended way for removing event handlers as of jQuery 1.7.
Recently , Ive been using .delegate and .live a lot.They have a subtle difference when it comes to event capturing I guess.
When using live for link clicks like $('a').live("click",... , the links which had an image as their html content, ended up with the click handler getting the target as the image instead of the link.
Whereas with delegation ,it seems that it the link which is passed as the target.
What is the catch here?
Also, when exactly is a click handler called for .delegate, while the capturing phase or the bubbling phase?
The main difference between .live and .delegate is, that .delegate() uses a context. In other words, .delegate() is actually a wrapper for .live(), but instead watching the document root for bubbling events, it'll just watch a given root node.
For instance
$('a').live('click', function() {
});
will create an event handler attached to your document.body. This will catch absolutly all anchors-clicks that occur on your site.
$('#someDiv').delegate('a', 'click', function() {
});
will only "watch" all anchors which are childnodes from #someDiv.
It's unlikely that a delegated event by .live() have another target. Both .live() and .delegate() pass in the event object into the handler. It should make no difference at all, the event.target should always be the node of invocation.
Ref.: .live(), .delegate()