Привязка обратного вызова jquery при изменении html

Question

Возможный дубликат:
Автоматически добавлять обработчик событий во вновь созданный элемент, используя jQuery

Мне нужно связать обратный вызов jquery с динамическим контентом.

Например:

<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>

Если я нажму на "Click me", он добавит изображение… ну, теперь я хочу связать обратный вызов JQuery для всех созданных изображений, но если я добавлю этот код в.ready(), он не будет работать.

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

Есть способ связать обратный вызов JQuery во время выполнения?

Вот пример в jsFiddle: http://jsfiddle.net/fM8Z7/

Answer 1

Попробуй это:

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++;
   });              
});​

демонстрация

Answer 2

Попробуй это:

$("#createContent").click(function () {
    var img = document.createElement('img');
    img.setAttribute('class', 'myImg');
    img.setAttribute('title', 'blabla');
    img.setAttribute('src', 'http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png');

    img.addEventListener('click', function () {
        alert("click on img");
        $(this).hide();
    });
    $("#myCont").append(img);
});

Это создаст 1 img элемент, установите его свойства, добавьте прослушиватель событий, затем добавьте изображение к #myCont,

Или чистый JQuery:

$("#createContent").click(function () {

    var img = $('<img class="myImg" title="blabla" src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png" />')
        .click(function () {
            alert("click on img");
            $(this).hide();
        }
    );
    $("#myCont").append(img);
});

Answer 3

Попробуй это...

это добавляет элемент и инициализирует щелчок только к добавленному элементу

jQuery(document).ready(function() {
   $("#createContent").click(function(){
       var appendedItem= $('<img  class="myImg" title="blabla"  src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png"  />');
      appendedItem.appendTo("#myCont")
                  .click(function(){
                      alert("click on img");
                      $(this).hide();        
                   } 
   );

  });
}) ;​

возиться здесь

Answer 4

Попробуй это

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

} );
$("#myCont").on('click', function(event){
        alert("click on img");          
        $(event.target).hide();
   });  

});

Так как класс ".myImg" не существует, когда вы связываете событие, вы должны связать событие click с существующим элементом. Вы можете получить изображение, по которому щелкают, используя объект "событие".

Вы можете отфильтровать теги изображений с помощью атрибута tagName события.target

Исследуйте объект события jquery для получения дополнительных данных.

Этот метод помогает избежать множественных привязок.

Answer 5

Это должно сделать магию:

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