jQuery 1.9 and 1.10 have introduced a host of changes, but for the most part these changes are mostly transparent
to existing application usage of jQuery. After spending some time last week with a few of my projects and going through them with a specific eye for jQuery failures I found that for the most part there wasn't a big issue. The vast majority of code continues
to run just fine with either 1.9 or 1.10 (which are supposed
to be in sync but with 1.10 removing support for legacy Internet Explorer pre-9.0 versions). However,
one particular change in the new versions has caused me quite a bit of update trouble, is the removal of the jQuery.live() function. This is my own fault I suppose - .live() has been deprecated for a while, but with 1.9 and later it was finally removed altogether from jQuery. In the past I had quite a bit of jQuery code that used .live() and it's
one of the things that's holding back my upgrade process, although I'm slowly cleaning up my code and switching
to the .on() function as the replacement. jQuery.live() jQuery.live() was introduced a long time ago
to simplify handling events on matched elements that exist currently on the document and those that are are added in the future and also match the selector. jQuery uses event bubbling, special event binding, plus some magic using meta data attached
to a parent level element
to check and see if the original target event element matches the selected selected elements (for more info see Elijah Manor's comment below). An Example Assume a list of items like the following in HTML for example and further assume that the items in this list can be appended
to at a later point. In this app there's a smallish initial list that loads
to start, and as the user scrolls towards the end of the initial small list more items are loaded dynamically and added
to the list.<div id="PostItemContainer" class="scrollbox">
<div class="postitem" data-id="4z6qhomm">
<div class="post-icon"></div>
<div class="postitemheader"><a href="show/4z6qhomm" target="Content">1999 Buick Century For Sale!</a></div>
<div class="postitemprice rightalign">$ 3,500 O.B.O.</div>
<div class="smalltext leftalign">Jun. 07 @ 1:06am</div>
<div class="post-byline">- Vehicles - Automobiles</div>
</div>
<div class="postitem" data-id="2jtvuu17">
<div class="postitemheader"><a href="show/2jtvuu17" target="Content">Toyota VAN 1987</a></div>
<div class="postitemprice rightalign">$950</div>
<div class="smalltext leftalign">Jun. 07 @ 12:29am</div>
<div class="post-byline">- Vehicles - Automobiles</div>
</div> …
</div>
With the jQuery.live() function you could easily select elements and hook up a click handler like this:$(".postitem").live("click", function() {...});
Simple and perfectly readable. The behavior of the .live handler generally was the same as the corresponding simple event handlers like .click(), except that you have
to explicitly name the event instead of using
one of the methods.
Re-writing with jQuery.on()
With .live() removed in 1.9 and later we have
to re-write .live() code above with an alternative.
The jQuery documentation points you at the .on() or .delegate() functions
to update your code. jQuery.on() is a more generic event handler function, and it's what jQuery uses internally
to map the high level event functions like .click(),.change() etc. that jQuery exposes.
Using jQuery.on() however is not a
one to one replacement of the .live() function. While .on() can handle events directly and use the same syntax as .live() did, you'll find if you simply switch out .live() with .on() that events on not-yet existing elements will not fire. IOW, the key feature of .live() is not working.
You can use .on()
to get the desired effect however, but you have
to change the syntax
to explicitly handle the event you're interested in on the container and then provide a filter selector
to specify which elements you are actually interested in for handling the event for.
Sounds more complicated than it is and it's easier
to see with an example. For the list above hooking .postitem clicks, using jQuery.on() looks like this:$("#PostItemContainer").on("click", ".postitem", function() {...});
You specify a container that can handle the .click event and then provide a filter selector
to find the child elements that trigger the the actual event. So here #PostItemContainer contains
many .postitems, whose click events I want
to handle. Any container will do including document, but I tend
to use the container closest
to the elements I actually want
to handle the events on
to minimize the event bubbling that occurs
to capture the event.
With this code I get the same behavior as with .live() and now as new .postitem elements are added the click events are always available. Sweet.
Here's the full event signature for the .on() function:
.on( events [, selector ] [, data ], handler(eventObject) )
Note that the selector is optional - if you omit it you essentially create a simple event handler that handles the event directly on the selected object. The filter/child selector required if you want life-like - uh, .live() like behavior
to happen.
While it's a bit more verbose than what .live() did, .on() provides the same functionality by being more explicit on what your parent container for trapping events is.
.on() is good Practice even for ordinary static Element Lists
As a side note, it's a good practice
to use jQuery.on() or jQuery.delegate() for events in most cases anyway, using this 'container event trapping' syntax. That's because rather than requiring lots of event handlers on each of the child elements (.postitem in the sample above), there's just
one event handler on the container, and only when clicked does jQuery drill down
to find the matching filter element and tries
to match it
to the originating element. In the early days of jQuery I used manually build handlers that did this and manually drilled from the event object into the originalTarget
to determine if it's a matching element. With later versions of jQuery the various event functions in jQuery essentially provide this functionality out of the box with functions like .on() and .delegate().
All of this is nothing new, but I thought I'd write this up because I have on a few occasions forgotten what exactly was needed
to replace the
many .live() function calls that litter my code - especially older code. This will be a nice reminder next time I have a memory blank on this topic. And maybe along the way I've helped
one or two of you as well
to clean up your .live() code…© Rick Strahl, West Wind Technologies, 2005-2013Posted in jQuery
Tweet
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
