element appended to html not visible by click event

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 u开发者_JAVA技巧sing live() ?

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().

You can't usually assign event handlers to DOM objects that don't yet exist. live() lets you get around this limitation.

You have to attach events to dynamically generated elements by using the live() method because they do not exist at page load, which is when jQuery initially hooks up event handlers.

Lots more information available in the documentation

In my experience, code added to the DOM by jQuery or other scripting won't respond to events attached with the .bind() method. .click() and other similar methods are just wrappers for .bind() so you have the same problem. .live() gets around this limitation by actively looking at events and targets to see if they match.

Well done, by the way - good for you for finding the solution to the problem.

If you really don't want to use live(), you can bind the click to the loaded divs after the data is loaded

$.ajax(
    {
        type: "GET",
        url: "/LoadedData",
        data: { "pageNumber": pageNumber },
        success: function (result) {
            $('.Container').append(result);
            $('.Container div').click(function(){
                // Loaded div's click code goes here
            });
        }
    }