jQuery Forum

My ideal solution would be a $.live method that would work as follows:

$.live( selector , context ).click(...).mousein(...).bind(... , ...);

That is $.live behaving like $ except the jQuery object would be empty and a boolean property would be set so that redirection could be coded in "bind" (and some manipulation methods that could be harmful). 

I've written up a summary about this issue with $.live and $.fn.live:

http://paulirish.com/2010/on-jquery-live/

I think I successfully debunk the performance claim, but there remain issues that likely need clarification.  

People might not like $().delegate … but at least they will have to understand the principles of what is going on. 

You're missing this post about it:

http://groups.google.com/group/jquery-dev/browse_thread/thread/e3bb36f8a9dae2b5/7e3bc980cd327a74

John, I'll point you to:

• + my comment on paul's page
• + the (non-tested and very hasty) patch that is there (#3, ie http://pastie.org/790043 ).

I respect your view on jQuery being the conduit for selector/context pairs. However it seems quite clear to me that we have *2* types of jQuery nodelist objects:

• + one for query results (let's call them "real" or "actual")
• + another for present/future nodes (let's call them "virtual"or "dynamic")

However, current implementation doesn't acknowledge that and tries & virtualizes a "real" nodelist as soon as you hit the $.fn.live method (effectively nullifying the interest of a query being carried on in the first place but, also, changing the semantic of *this* -- to my knowledge, the only method in all of jQuery to do so). Furthermore, like others pointed out, if you made some traversing before hitting $.fn.live, things can get quite funky.

The situation is also frustrating, because I can't understand why I have all these nice methods on top of bind and nothing on top of live whereas, basically, I wanna do the exact same kind of bindings on "dynamic" nodelist as I do with those "existing" ones resulting from a query.

If you take a step back, the ideal solution would be to specify if the nodelist is "dynamic" or not at creation: you set a flag on the jQuery object telling if it is virtual or not: that way, it's easy to redirect from bind to live and from unbind to die under the hoods while always (and only) using bind/unbind whatever the situation. You gain access to all bind derivatives for virtual nodelists: click(), hover(), etc...

My first reflexe to implement this idea was to add a third parameter to the jQuery signature but it appeared quite quickly to me that jQuery(selector, context, true) or jQuery(selector, context, false) was looking quite awkward and unnatural. So the idea came to have a function under jQuery that would have the same selector/context signature and would return a virtual nodelist (an interface compatible with the results of a query with the infamous virtual/live flag in). Maybe this new function could just be a redirect to a three parameters jQuery but this is all just some technical pinpointing imo.

It may not be perfect, the patch probably doesn't work as intended (not sure I understood the bind/one thingy properly, I never ever entered into event.js before), but in the end, I can/could have things like this:

1. jQuery.dynamic(selector,context).click(func).hover(funcIn,funcOut);

Which looks and feels very jQueryish if you ask me and has much more flexibility than a simple $.fn.live().

Anyway, just my 2 cents, like we say, and sorry for my sure-to-be approximate english ;)

PS: Zoho's list item code is broken it seems

I have always felt that "live" suffers from too much sugar. The recent changes for accurately binding to the context is certainly an improvement, but issues remain.

1. The context argument must be a DOM element and not a jquery collection (last time I checked). This can be confusing for new users of the framework.

2. Executing the selector against the DOM when there is no intent to actually use those elements seems wasteful and unnecessary.

3. In order to delegate events on multiple "contexts" you must repeat the "live" call multiple times.

For these reasons I completely avoid using "live" (but I love the "closest" method). Personally, I think the proposed "delegate" signature is quite useful, and can still utilize the current "live" implementation.

1. $.each({ live:"listen", die:"unlisten" },function( live, listen ){
   
2.         $.fn[ listen ] = function( selector ){
3.                 var args = ([]).slice.call( arguments, 1 );
   
4.                 return this.each(function(){
   
5.                         $.fn[ live].call({ selector:selector, context:this }, args );
   
6.                 });
   
7.         };
8. });
   

1. $.live(selector,context,eventtype,data,handler); 

1. $('.triggerbox a.trigger', $('#sidebar')[0]).live('click', ... 

 With regard to the performance implication of having to resolve the selector but not using that result - what if jQuery() was made to defer actually resolving a selector? Then, most methods would trigger the selector resolving, but something like "live" could just peek at what the selector is, instead. Example:

1. $('li').live(click, handler);
   

I'm not sure how much complexity this would add to jQuery though, and whether it's worth it just for live (I can't think of any other jQuery.fn function that would need this sort of thing).

1. $(context).delegate('click', 'selector', callback)

1. jQuery.fn.listen = function(event, selector, fn) {
2.     return $(this).each(function() {$(this).bind(event, function(evt) {
3.         if (evt && evt.target && $(evt.target).is(selector)) {
4.             fn.call(evt.target, evt);
5.         }
6.     });});
7. };

1.     $.fn.listen = function(event, selector, fn) {
2.         return $(this).each(function() {
3.             var $context = $(this);
4.             $context.bind(event, function(evt) {
5.                 if (evt && evt.target) {
6.                     var $element = $(evt.target).closest(selector, $context);
7.                     if ($element.length) {
8.                         return fn.call($element[0], evt);
9.                     }
10.                 }
11.             });
12.         });
13.     };

1. $(".button",toolbar[0]).live("click",function(e){});