jQuery的約束。對不點火

Question

我通過AJAX請求數據，並將它附加到頁面，像這樣：

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

我已經成立了一個事件監聽器監聽click事件：

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

但是，該方法永遠不會被解僱。

使用Chrome開發人員工具我可以看到正確的HTML正被插入到頁面中，並且.image-holder div正在被點擊（它沒有1x1尺寸或其他東西）。

Answer 1

此代碼：

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

只有結合事件處理程序存在在你運行該代碼的時間對象。如果稍後將對象添加到頁面，則它們將不具有事件處理程序。

相反，你可以使用委託形式的.on()這樣的：

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

這將單一的事件處理程序綁定到#post-images這將趕上冒泡點擊從選擇相匹配的任何子對象來.image-holder所以它將與動態添加的對象一起工作。