Question

I append to div container some div’s :

 $.ajax(
    {
        type: "GET",
        url: "/LoadedData",
        data: { "pageNumber": pageNumber },
        success: function (result) {
            $('.Container').append(result);
        }
    }

and when i try to click on new div i just can’t. I omit this by using

$('.Container').live('click', function () {

    });

but can You tell my why I can’t do this without using live() ?

Answer 1

You’re binding your event handlers to elements that exist when the page loads.

Elements that are added later must be bound at that time.

The alternative is to utilize event delegation. jQuery has 2 delegation methods, .live() and .delegate().

What happens with those methods is that the handler is not bound to the elements in question, but rather bound to some container. When the click event bubbles up to the container, jQuery checks to see if the element clicked matches the selector you gave it, and if so, fires the handler.

Visualize it like this:

$('.item').click(function() { /* do something */ });

Binds like this:

<div class="Container">
    <div class="item">click me</div> <!-- handler is bound -->
    <div class="item">click me</div> <!-- handler is bound -->
    <div class="item">click me</div> <!-- handler is bound -->
</div>

But this:

$('.Container').delegate('.item','click', function() { /* do something */ });

Binds like this:

<div class="Container">    <!-- handler is bound to container, and runs the
                                 ".item" selector when a click occurs inside -->
    <div class="item">click me</div> 
    <div class="item">click me</div>
    <div class="item">click me</div> 
</div>

So if you add additional .item elements to the .Container, they will just work, because the handler processes all clicks inside .Container.

<div class="Container">    <!-- handler is bound to container, and runs the
                                 ".item" selector when a click occurs inside -->
    <div class="item">click me</div> 
    <div class="item">click me</div>
    <div class="item">click me</div> 

    <div class="item">click me</div>  <!-- new item -->
    <div class="item">click me</div>  <!-- new item --> 
</div>

So the click events on the new items bubble just like on the original ones.

The .live() method works the same as the .delegate() method. It just uses the document as the default container, which means that it has to process all clicks on the page.

Because of this, I prefer .delegate().