jQuery AJAX document trigger?

Question

Hi, My jQuery code:

$('.Img').click(function() {
    alert('Test');
});

$().ready(function() {
    $.ajax( {
        type     : 'POST',
        url      : 'Post.php',
        success  : function(Response) {
          $('#Response').html(Response);
        }
    }
});

My HTML code:

<div id="Response"></div>
<img class="Img" src="blank.gif" /> [Click Trigger]

My PHP code:

echo '<img class="Img" src="blank.gif" />'; [Ajax from response]

why this image does not trigger from AJAX response?

Answer 1

You need to use .live() here, like this:

$('.Img').live('click', function(){
 alert('Test');
});

It doesn't work currently because $('.Img') doesn't find the <img> to attach a click handler to...it didn't exist then, not until the ajax call loaded it, .live() will listen for the click appropriately, even if the element is added later.