Why the expression for live needs to be evaluated in jQuery

Question

The following question is inspired by this blog entry at ajaxian.com and this comment by paul irish.

Here is a way to declare live event.

$("li a").live(...)

As per this blog entry, it is my understanding that live events are nothing but a catch all at the document level. Any event that bubbles all the way to the top are caught by live events and if the selector is matching then the function is invoked.

It is my understanding that on document ready if I invoke

$("li a").live('click', ..)

then all jQuery should do is to put the literal selector 'li a' in memory somewhere. Now when a click happens and if that click bubbles all the way to the top then live should check what is the target element. If the target element satisfies the rule of 'li a' then the function should be fired otherwise ignored this bubbled up event.

Based on that presumption on document ready when I am calling

$("li a").live('click', ..)

then ideally jQuery should not actually go looking for all the element matching 'li a' because jquery does not do anything with those elements. I know for sure that the elements that are currently present in the document matching 'li a' are not bound to any event handler.

If all jQuery has to do is to put the literal 'li a' at the document root level then why go looking for elements matching the criteria 'li a' on document ready. But based on the comment link that I mentioned at the top, it seems jQuery actually goes about looking for element on document ready.

My question is why should live method find all the 'li a' methods when it is not going to do anything with them. I guess the live syntax should have been something like

$.live('li a', 'click', function(){})

Am I missing something here?

Answer 1

There is an undocumented way at the moment which would work without previously selecting the elements

jQuery.fn.selector="p";
jQuery.fn.live('click',function(){
  alert('clicked');
});

This allows you to set the live handler without jQuery matching the elements which currently exist in the DOM which it ignores anyway.

Answer 2

i hacked around this issue by overriding find():

jQuery.fn.find = function(old) {
 return function() {
  var m = arguments[0].match(/^lazy:(.*)/);
  if(m) {
   this.selector = m[1];
   return this;
  }
  return old.apply(this, arguments);
 }
} (jQuery.fn.find);

  // this will select elements...
  $("input").live("click", function() {

  // this won't
  $("lazy:input").live("click", function() {

Answer 3

My understanding of why it grabs all the elements from the DOM is because that is what the $() function does, then after it has selected the DOM elements it executes the function live().

In that case, you would need to use one of the workarounds suggested elsewhere in the answers here.

Answer 4

live is just a way to give event delegation to people that do not easily understand it.

You look familiar with the concept and in need of performance. I would suggest to actually use event delegation explicitely instead of live.

$(document).bind('click', function(event)
{
    var $target = $(event.target);

    if( $target.is('li a') )
    {
     // Do something with $target
    }
});