Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

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

JQuery Gains Live DOM Binding with Live Query Plugin

This item in japanese

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