BT

InfoQ Homepage News JQuery Gains Live DOM Binding with Live Query Plugin

JQuery Gains Live DOM Binding with Live Query Plugin

Bookmarks
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
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.

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

Community comments

  • Why not give a try to "jQuery live bind"?

    by diyism diyism /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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

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

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.