jQuery question on unbind

Question

Can i use jQuery unbind() with live()

e.g.

$(".content_media").unbind("touchstart").live("touchstart",function(){....});

If yes, what exactly does it mean? Basically I want to understand what does an unbind mean

I have a page where I bind elements on document ready...and in between there are AJAX callls which kind of rewrite the same elements...Now I expect them to behave similarly at all times..which is why I have used live()

Please correct me if there can be some exceptions here where the live() bindings won't work..

Answer 1

Unbind means removing event handlers from a set of elemnts. you can remove only some event handlers

$(".content_media").unbind("click");
//it means delete all click handlers on elements with class content_media

or all event handlers

$(".content_media").unbind()
//it means delete all handlers on elements with class content_media

You can bind new live events after unbinding them, the attention with live() is this (taken from documentation)

Because the .live() method binds event handlers to document by default, calling .unbind() on document will unbind the handlers bound by .live(), as well. For example, $(document).unbind('click'); will remove not only $(document).bind('click', fn1) but also $('a.foo').live('click', fn2).

Answer 2

To unbind means to remove the event handlers you previously attached to an element:

Remove a previously-attached event handler from the elements.

But you cannot use unbind to remove an event handler added with live because live works differently (it attaches the event handler to the document root).

That's what .die() is for:

Remove all event handlers previously attached using .live() from the elements.

Answer 3

I don't get what's your point for unbind here..

$(".content_media").unbind("touchstart").live("touchstart",function(){....});

well, if you have function fn1 and then you have it as,

$(".content_media").live("touchstart",fn1);

then at a certain point, you want to use fn2 without fn1 as like,

$(".content_media").live("touchstart",fn2);

then your good to call unbind first... to remove fn1

$(".content_media").unbind("touchstart").live("touchstart",fn2);

but if you just want fn1 then you don't have to use unbind actually...

edit

if for the reason why you're doing that is because you are calling this line,

$(".content_media").unbind("touchstart").live("touchstart",function(){....});

in every ajax execution... then that justifies it... but you're doing it the wrong way....

just put it outside ajax execution and without unbind, then you're good to go...

$(".content_media").live("touchstart",function(){....});

Answer 4

Yes, you can use unbind()^Doc with live()^Doc as shown.

This code:

$(".content_media").unbind("touchstart").live("touchstart",function(){...

Unbinds any touchstart event-listeners that were set via jQuery bind(), then creates touchstart listeners for the current, and any future nodes with the content_media class.

Note that to stop listeners being set with live() you need to use die()^Doc.

Also, listeners set outside jQuery are not always affected by these means.

Answer 5

The difference between live() and bind() is that live events bubble to the document and then they are handled by jQuery and checking what element fired the event. Therefore, if you add more elements that match the selector AFTER you have already called live, they will all fire the event.

Bind(), however is element specific and you have to manually bind all new elements. In the sense that if you bind some elements at first and add more (even if the match the bind selector) you're gonna have to bind them again (but be careful not to doublebind the original elements).

Unbind() is to bind(), what die() is to live(). You can only unbind events that are set with bind(), and you can only die() events that are set with live(). Also it's worth mentioning that you cannot stop live events from propagating, unlike events that were added with bind.