JQuery. Связывает не стреляя

Question

Я запрашиваюсь данными через AJAX и добавление его на страницу как так:

$('#post-images').append('<div class="image-holder"><img src="' + resp.images[i].imageUrl + '" /><br /><input type="checkbox" value="' + i + '" /></div>'); 

Я настроил приемник событий прослушивания для события щелчка:

$('.image-holder').on('click', function() { 
    alert("testing"); 
}); 

Однако метод никогда не срабатывает.

Использование инструментов разработчика Chrome. Я вижу, что на страницу вставлен правильный HTML, и нажимается div .image-holder (у него нет параметров 1x1 или что-то в этом роде).

Answer 1

Этот код:

$('.image-holder').on('click', function() { 
    alert("testing"); 
}); 

связывает только обработчики событий к объектам, которые существуют на момент запуска этого кода. Если объекты будут добавлены на страницу позже, они не будут иметь обработчиков событий.

Вместо этого, вы можете использовать делегированные форму из .on() так:

$("#post-images").on('click', '.image-holder', function() { 
    alert("testing"); 
}); 

Это будет связать один обработчик событий для #post-images, который будет ловить бурлит клики, поступающие из всех дочерних объектов, которые соответствуют селектору .image-holder поэтому он будет работать с динамически добавленными объектами.