Функция на Click не работает

Question

Мне нужно использовать динамически созданные изображения для моего проекта. Я делаю это с помощью jQuery:

var img = $('<img />').attr({ 'id': i, 'src': e.files[i].thumbnails["200x200"], 'alt':e.files[i].name, 'class': 'photo'}).appendTo($('#img')); 

Но я не могу запустить функцию, если нажимается изображение. Я пробовал:

$(document).ready(function() { 
    $(".photo").click(function(){ 
     alert('Works!');  
    }); 
}; 

и OnClick:

var img = $('<img />').attr({ 'id': i, 'src': e.files[i].thumbnails["200x200"], 'alt':e.files[i].name, 'class': 'photo', 'onClick': 'test();' }).appendTo($('#img')); 

[...]

function test(){ 
    alert('Works!'); 
} 

Но оба способа не работают ... Что я сделал не так?

Answer 1

Попробуйте это, вам нужно использовать на() и передать на ближайший статический родительский элемент для динамически добавляемых элементов

$(document).on('click','.photo',function(){ 
     alert('Works!');  
    }); 

Answer 2

Когда вы делаете

$(".photo").click(function(){ 
    alert('Works!');  
}); 

это только привязывая его к элементов в dom, поэтому, как только вы добавляете динамический html, он не связывает это даже с этим html. В этом случае, если вы используете

$(document).on('click','.photo',function(){ 
    alert('Works'); 
}); 

Этот код будет привязать событие щелчка к каждому элементу в HTML, даже если он будет добавлен динамически.

Answer 3

Просто добавьте обработчик события при создании изображения?

var img = $('<img>') 
      .attr({ 
       id: i, 
       src: e.files[i].thumbnails["200x200"], 
       alt: e.files[i].name, 
       // keep 'class' for jshint 
       'class': 'photo' 
      }) 
      .click(function() { 
       alert('Works!'); 
      }) 
      // you can leave out $('#img') and just write: 
      .appendTo('#img'); 

, конечно, вы должны определить эту функцию обработчика нажмите только раз:

function clickHandler() { // do stuff } 

и добавить его как .click(clickHandler) в приведенном выше примере.