$.live() and $.die() binding and unbinding?

Update got it working function denyRest() { $("body"). Append("return false"); return false; } function functionThatWaitsFiveSeconds() { $('a'). Die('click.

Thing', functionThatWaitsFiveSeconds); var loader = $('doing some stuff'); $('#content'). Append(loader); loader. Animate({ 'width': '500' }, 5000, function() { loader.remove(); $('a').

Die('click. Otherthing', denyRest). Live('click.

Thing', functionThatWaitsFiveSeconds). Live('click. Otherthing', denyRest); }); } $('a').

Live('click. Thing', functionThatWaitsFiveSeconds); $('a'). Live('click.

Otherthing', denyRest); Updated fiddle. I believe The issue was this. Use live to attach the handler to wait 5 seconds Use live to attach a handler that returns false to stop events.

Click anchor tag, which removes the wait 5 second handler. Clicks to the anchor tag at this time will be stopped via the return false statement. NOW the return false statement is first.

Once we rebind the wait 5 seconds handler it is in second place to be ran but gets denied by the return false handler. Fixed this to trash both handlers and rebind them in the correct order.

Awwwwwww Maaaaaaannnnn. I feel like such a fool right now. I was trying to namespace my events by putting a space between 'click namespace' instead of a dot 'click.

Namepace'. Thanks for posting this (bangs head off of desk) – kissmyface Mar 3 at 14:46 In reply to your side note: the a tag is required to preserve functionality without javascript. – kissmyface Mar 3 at 14:51 Sorry I spoke to soon.

Your example does not work - it doesn't rebind the event handler after unbinding it (the same problem I was having...) – kissmyface Mar 3 at 15:20 Ok, I believe it is working now, check out the updated fiddle and let me know. – Mark Mar 3 at 16:02 @Mark - I believe this fails when you have multiple links. Clicking on one link and beginning the loader display will unbind the handler from all other links.

– no.good.at. Coding Mar 3 at 16:58.

If you don't mind this approach (using a marker class) then this might be what you're looking for. No messy binding and unbinding of events - while trying to figure out a way to answer you question, I found it to be quite a bother to track everything that was bound/unbound on the page and I reached a stage once where I had multiple loaders appear for a single click. $(document).

Ready(function(){ function functionThatWaitsFiveSeconds(el, e){ //stop default link click events e.preventDefault(); e.stopPropagation(); if($(el). HasClass('loadingMarkerClass')) { return false; //we're currently processing this element already } $(el). AddClass('loadingMarkerClass'); //add a dummy, marker class to indicate we're showing a loader for this element var loader = $('Loading: ' + $(el).html() + ''); $('#content').

Append(loader); loader. Animate({'width': '500'}, 5000, function(){ loader.remove(); $(el). RemoveClass('loadingMarkerClass'); }); } //bind above function to clicking a $('a').

Live('click', function(e){functionThatWaitsFiveSeconds(this, e)}); }).

Didn't know that :-) Thanks. – kissmyface Mar 3 at 14:48 Also this would unbind the click event that I DONT want to unbind. – kissmyface Mar 3 at 15:20 @calumbrodie I've updated my answer with something I think works - it handles multiple clicks on a link, allows for multiple links in the page and also prevents the links from being followed.

– no.good.at. Coding Mar 3 at 17:01 @calumbrodie I just signed up for jsfiddle and updated the code – no.good.at. Coding Mar 3 at 17:06 Thanks for your answer - your approach does work and the fiddle you've posted solves all the problems I pointed out.

Still havn't got to the bottom of why my original code didn't work though – kissmyface Mar 37 at 9:43.

Actually the easiest way to achieve this will be to remove the href tag on the anchor link. So your code becomes $(document). Ready(function(){ function functionThatWaitsFiveSeconds(){ // $('a').

Die('click', functionThatWaitsFiveSeconds); var loader = $('doing some stuff'); $(this). Attr("href","#"); $('#content'). Append(loader) loader.

Animate({'width': '500'}, 5000, function(){ loader.remove(); //now rebind click handler // $('a'). Live('click', functionThatWaitsFiveSeconds) }) } //bind above function to clicking a $('a'). Live('click', functionThatWaitsFiveSeconds) //need to return false at all times to prevent folowing link $('a').

Live('click',function(){ return false; }) }).

The with the link is a requirement it is not optional. Thanks – kissmyface Mar 3 at 15:01.