jQuery Plugin: Live Query

August 22, 2007 | Filed Under Blog, Technology 

My hear is exploding with happiness and joy at the existence of Brandon Aaron. He has built a sweet jQuery plugin (Live Query) that reduces complexity in Ajax and general DOM manipulation coding by a great deal (when it comes to applying behaviors). First, let me tell you the problem (if you don't already know):

Say I build a web application where I want to assign an onClick event to an <a> tag. In jQuery I'd do it like this:

First the HTML:

PLAIN TEXT
HTML:
  1. <a href="another.html" class="another">Grab Another!</a>
  2.  
  4.   <li><a href="whee.html" class="whatever">Bork</a></li>
  5.   <li><a href="whee.html" class="whatever">Bork</a></li>
  6.   <li><a href="whee.html" class="whatever">Bork</a></li>
  7. </ul>

Now lets do up the JavaScript:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   $('a.whatever').bind('click',function(){
  3.     alert('ZOMG Hai');
  4.     return false;
  5.   });
  6. });

Simple, right? Yeah. It is. Nothing new. Now...say that I manipulate the DOM and add in another <a> tag with the class "whatever" that I want the same even applied (with or without Ajax, doesn't matter). Here's what I would have had to do in the past:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   $('a.another').bind('click',function(){
  3.     $('ul').append('<a href="whee.html" class="whatever">Bork</a>');
  4.  
  5.     $('a.whatever').bind('click',function(){
  6.       alert('ZOMG Hai');
  7.       return false;
  8.     });
  9.  
  10.     return false;
  11.   });
  12. });

See that? Kinda complex. Things become quite complex when you begin doing Cross Domain Scripting via Remote JavaScript calls (which is what is heavily used in one of the apps I have done front-end development for).

The Live Query plugin is a beautiful thing as it "auto-magically" binds events to dynamically added elements within the page as they appear! So ALL of that JavaScript from both examples becomes:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   $('a.whatever').livequery('click',function(){
  3.     alert('ZOMG Hai');
  4.     return false;
  5.   });
  6.  
  7.   $('a.another').bind('click',function(){
  8.     $('ul').append('<a href="whee.html" class="whatever">Bork</a>');
  9.     return false;
  10.   });
  11. });

Yup. That's it. Bind a livequery event to an element and as elements that match appear on the page...BAM! The event is applied.

There are some more advanced things you can do with the plugin and you can find those out at the Live Query site.

Tags: , , , , ,

Related Articles:

Discuss This Article

One Response to “jQuery Plugin: Live Query”

  1. Avatardiyism
    Posted: Aug 24th, 2008 at 6:31 pm

    Why not give a try to “jQuery Live Bind”:
    http://plugins.jquery.com/project/live_bind

    Reply to this comment.
    		1
SexyComments by BorkWeb

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview:

 (412) - jquery live search (149) - jquery live (37) - jquery ajax search (31) - jquery onclick (28) - live search jquery (25) - jquery bind click (22) - jquery bind (19) - jquery click return false (19) - jquery database (18) - jquery href (13) - jquery right click (11) - jquery bind function (8) - jquery alert (8) - livesearch jquery (8) - jquery click bind (7) - jquery databind (7) - whatever (6) - jquery click counter (6) - live query (6) - jquery live preview (6) - jquery onclick return false (6) - jquery remote (6) - JQUERY onclick function (5) - jquery return false (5) - jquery live query (5) - jquery link preview (5) - link preview jquery (5) - livequery (4) - jquery manipulate href (4) - jquery onclick append (4) - jquery rebind (4) - livequery examples (4) - jquery append href (4) - jquery append event (4) - ajax jquery database (4) - jquery append (4) - ajax search jquery (4) - jquery duplicate Form (4) - jcarousellite ajax (4) - jquery database search (4) - livequery tutorial (4) - jquery cross domain plugin (4) - jquery search from database (3) - jquery append onclick (3) - href jquery (3) - jquery cross domain ajax plugin (3) - database and jquery (3) - jquery bind event (3) - jquery assign onclick (3) - domain name checker jquery (3) - jquery live bind (3) - jquery onclick href (3) - jquery search live (3) - jquery search (3) - jquery ajax live (3) - jquery bind ajax (3) - jquery livequery tutorial (3) - ajax live search jquery (3) - jquery click (3) - jquery ul (3) - jQuery a href onclick (3) - javascript live query (3) - jquery livesearch plugin (3) - jquery onclick event (3) - jquery ajax bind (3) - jquery href click (3) - livequery example (2) - bind function jquery (2) - jquery .click a (2) - live AJAX search query (2) - livesearch plugin jquery (2) - jquery bind change (2) - jquery plugin livesearch (2) - jquery .click return false (2) - jquery database queries (2) - jquery click onclick (2) - jquery and database (2) - live query tutorials (2) - jQuery Live Ajax Search Plug-in (2) - jquery live search ajax (2) - jquery href click event (2) - jQuery Live Ajax Search (2) - jquery a click return false (2) - jQuery bind on a tag (2) - append event jquery (2) - jquery remote-domain (2) - jquery ajax database (2) - jquery append events (2) - live query ajax (2) - jquery auto preview (2) - append in jquery (2) - jquery db search (2) - jquery append example (2) - jquery bind click duplicate (2) - jquery wordpress live search (2) - ajax search jquery wordpress (2) - jquery plugins suck (2) - jquery alerts (2) - ajax live query (2) - jquery remote domain queries (2) - jquery onclick alert (2) - jquery ajax search examples (2) - jquery domain check (2) - jquery with a href click (2) - jquery predictive search live search (2) - right click jquery (2) - jquery ajax search plugin (2) - live jquery (2) - jquery binding (2) - jquery database query (2) - jquery live searching (2) - jquery ajax queries (2) - jquery href function (2) - jquery cross domain scripting (2) - live query jquery (2) - jquery append bind (2) - jquery click() return false (2) - livequery ajax (2) - jquery click href (2) - jquery bind a href (2) - jquery ajax live search (2) - jquery right-click (2) - jquery ajax onclick (2) - jquery (2) - livesearch jquery wordpress (2) - livesearch jquery example (2) - append to href jquery (2) - jquery bind jcarousellite (2) - jquery ul append (2) - jquery livequery (2) - jQuery domain (2) - jquery cross domain (2) - livequery javascript (2) - jQuery duplicate html (1) - jquery bind() tutorial (1) - jquery form onclick (1) - JQuery ajax a href example (1) - jquery bind onclick to hyperlink (1) - jquery domain search (1) - append form element on click event jquery (1) - jquery append element to document (1) - jquery return false onclick (1) - jquery searching ajax (1) - jquery a href onclick example (1) - jquery live documentation (1) - jquery re bind (1) - jquery set click of one to click of another (1) - jquery ajax bind this (1) - jquery add onclick attribute (1) -