Запустить событие щелчка на DOM, опубликованном jQuery

Question

У меня есть код JQuery, который делает div onClick с определенным классом .caption. После того, как я вызвал событие click в .caption, этот класс не работает. Как я могу это сделать.

$('#edit').on('click',function(){ 
     var pre = '<div class="col-xs-6 col-md-4" style="margin:0 auto;"><div class="thumbnail"><div class="caption" style="text-align:center;">';  
     $("#imgs").append(pre); 

}); 

    $('div.thumbnail').on('click','.caption',function(){ 
    alert("Del"); 
}); 

Answer 1

Это потому, что, как @charlieftl указал в комментариях, элемент div.thumbnail не существует во время выполнения, и это не представляется возможным привязать событие щелчка к элементу, который не присутствует ...

Что вы можете сделать, однако, полагаться на пропускании события - например, когда событие щелчка срабатывает на недавно добавленном .caption, он на самом деле пузырь все пути к вершине дерева DOM (к объекту document). Вы можете прослушать этот барботаж на любом элементе, который уже присутствует во время выполнения - конечно, это является безопасным для прослушивания document, так как он является объектом, который является всегда присутствует:

$(document).on('click', '.caption', function(){ 
    alert("Del"); 
});