Question

why do programmers say that “live” is inefficient?

1. So what are the alternative
   methods to replicating that function
   that are more efficient?
2. How do we measure the impact of how much it slows things down?

Answer 1

I suppose it is inefficient because the handler is placed at the root node, and relies on bubbling to catch the event and run the proper handler.

One alternative would be to simply bind your handler to your dynamically created elements when they are created and added to the DOM.

Another alternative is to bind a single handler to a container, and let your events bubble up to that. This can be nice if you have lots of identical elements added to a container.

<div id="myContainer">
    <div class="myElement>element</div>
    <div class="myElement>element</div>
    <div class="myElement>element</div>
    <div class="myElement>element</div>
</div>

Bind a click handler to #myContainer instead of each .myElement.

$('#myContainer').click(function(e) {
    $target = $(e.target);
    if($target.closest('.myElement').length) {
        // Run my code for the click
    }
});

I image this may suffer from some of the same inefficiencies as .live(), but ought to be better as it is more localized. New .myElement items added, automatically work.

---

EDIT:

According to the docs: As of jQuery 1.4, event bubbling can optionally stop at a DOM element “context”.

This would seem to create a similar effect to the last method I mentioned.

---

EDIT:

As suggested by Nick Craver, jQuery’s .delegate() method can produce a similar effect more cleanly.

Example courtesy of Nick:

$('#myContainer').delegate('.myElement', 'click' function() { alert($(this).text()); });