Feb 19 2011

Tech Post: jQuery .live() to attach/detach events

Published by at 5:21 pm under Tech

I haven’t been putting up a bunch of tech posts lately but, despite me not having written a jQuery post in over 3 years, it’s still a regular draw of people to my site. This post is just to put a little organization to one of my more successful answer’s on stackoverflow. And to be truthfully, my old jQuery posts are pretty poor so I feel the need to redeem myself a bit with some better content.

The question that came up was “what was the best way to dynamically remove an event based on some criteria”. In the question, this was based on the value in a field. The quick and common answer was to use the obvious bind/unbind methods. In this case, there would be some onchange event that would bind/unbind the events accordingly. To be fair to those who gave answers, my solution wasn’t available when the older post was originally answered. It doesn’t say anything against all the other answers.

With the scenario given, there is also the solution that doesn’t seem to be given where the event just check the value of the field when fired. That solution seems to be just very uncreative and lacking elegance, though, so I think it says a lot about the community that it wasn’t given.

The solution I provided covers using the .live() method to dynamically “attach” the event. I’m using quotes as the live() method does not technically attach events to the elements they match, but really uses event bubbling to catch events as they happen and execute them on the elements that match the selector the event references. Since it matched to elements the time of event firing instead of needing to be bound to elements, it allows this to work for dynamically created content. Typically for ajax generated content, you would have to attach the event again (also making sure you don’t reattach the event to existing elements causing those to fire the event twice). You only have to register the event with it’s matching selector once on page load.

The benefit you get here is that all you have to do is change something on the element that would cause it to either match or be ignored based on changes to the attributes the selectors are using. A really good attribute to use is class. It’s easy to set with jQuery and it’s very robust since it can be a list unlike most of the other attributes which can only contain a singular value.

I set up an example on jsfiddle to show the example I’m describing.

For the lazy, I’ll put the relevant code here too.

The html:
<input id="eventMe" type="button" value="click me!" />
<input id="eventToggleBtn" type="button" value="toggle event" />

The JS:

$(document).ready( function () {
    $('#eventMe.clickable').live( 'click', function() {
        alert('I can haz events!');
    });
    $('#eventToggleBtn').click( function() {
        $('#eventMe').toggleClass('clickable');
        console.log($('#eventMe').class());
    });
});

In the example, I have 2 buttons. 1 with the live() event we are bind/unbinding and another button that will toggle the class (clickable) we are using as the selector. On first load, the first button does not match the selector of the live event so it doesn’t fire. Once you click the “toggle event” button, it adds the class and the event then fires when the first button is clicked. This has the added benefit of being able to dynamically change it’s appearance using the same selector in css. A disabled button could have a different appearance when the selector matches.

This isn’t completely fool proof solution, though. jQuery support for the events weren’t complete with the 1.3 version and you really would be limited to monitoring changes that could be checked in a jQuery selector, but that’s a pretty extensive set of characteristics. You could match them if they were located inside a certain parent, apply it to all matching elements other than the first, only odd elements. Your options are pretty open.

I hope that helps.

Share
Tags:

One response so far

One Response to “Tech Post: jQuery .live() to attach/detach events”

  1. [...] This post was mentioned on Twitter by Tom Marple, Anthony Nelson. Anthony Nelson said: New blog post: Tech Post: jQuery .live() to attach/detach events http://snow-blind.net/?p=551 [...]

Trackback URI | Comments RSS

Leave a Reply