BT

JQuery Gains Live DOM Binding with Live Query Plugin

| by James Estes Follow 0 Followers on Aug 22, 2007. Estimated reading time: 1 minute |
Live Query is a new plugin for jQuery that lets you register events or fire callbacks for matching DOM elements. The binding will be applied to Elements that currently match the selector AND Elements that are added later via Ajax. It will also automatically un-register the event when the element no longer matches the selector. In the comments on the Ajaxian post, John Resig commented on the difference between Live Query and similar tools from Prototype and Dojo (emphasis mine):
[Live Query] takes a normal jQuery selector and persists it, in real time, across the whole DOM. This means that you can set one query (and without ever having to re-call it, or re-initialize it) its effects will be felt everywhere: Just like CSS. This is a really important distinction, and I'm happy that it was able to be done with virtually no speed-hit overhead.
The 'lively-ness' of the binding is indeed interesting. The plugin checks every 20 milliseconds to see if any DOM manipulation has happened via other jQuery calls. If a jQuery action modified the DOM, then the live bindings are re-evaluated. This implies that DOM manipulation made outside of jQuery will not trigger the re-evaluation. This is really close to having a truly fluid (and live), cross-browser mechanism for applying behaviors to Elements in an unobtrusive, css-like fashion.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Why not give a try to "jQuery live bind"? by diyism diyism

You even could use it like this(bind an element before create it):

$.live_bind(".kkkk .ppp[title='333']:nth-child(3)", 'click', alr1);

$('.kkkk').append('<div class="ppp" title="333">hello</div>');



plugins.jquery.com/project/live_bind

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT