Question

Possible Duplicate:
Automatically add an event handler to a newly created element using jQuery

I need to associate a jquery callback on a dynamic content.

For example:

<script type="text/javascript">
jQuery(document).ready(function() {

   $("#createContent").click(function(){
       $("#myCont").append('<img  class="myImg" src="icon.png"  />');

   });

});
</script>

<span id="createContent">click me</span>
<div id="myCont"></div>

If I click over “Click me”, it add a image..well, now I want associate a JQuery callback at all the created images, but if I add this code in the .ready(), it doesn’t work.

$(".myImg").click(function(){
       alert("click on img"); 
       $(this).remove();
} );

There is a way to associate a JQuery callback on runtime?

Here, there is the example in jsFiddle: http://jsfiddle.net/fM8Z7/

Answer 1

Try this:

jQuery(document).ready(function() {
    var i = 0;
   $("#createContent").click(function(){
       $("#myCont").append('<img  class="myImg" title="blabla"  src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png"  />');
       $(".myImg").eq(i).click(function() {
           $(this).fadeOut('slow');
       });
       i++;
   });              
});​

Demo