JQuery Gains Live DOM Binding with Live Query Plugin

Posted by James Estes on Aug 22, 2007

Sections

Development

Topics

jQuery ,

Javascript ,

Java ,

Web Frameworks ,

Dynamic Languages ,

Web Development ,

WOA ,

AJAX ,

Languages ,

Rich Internet Apps ,

Programming ,

Architecture

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.

1. Back to top

   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

   Reply