jQuery事件功能無法正常工作

Question

我有一個頁面，其中使用jquery和ajax從數據庫顯示內容。 頁面中有很多過程，例如添加新內容和圖像，編輯，刪除等，並且都在使用ajax。 但是現在，某些事件功能（如click ， mouseenter）無法在數據庫中顯示的內容中使用。

例如：這就是我在頁面中顯示圖像的方式

for(var i=0;i<images.length;i++)
{
$("#content").append("<img src='"+images[i]+"' class='img'  width='300' height='200' />");
}

圖像顯示正確。 但是，當嘗試對此類圖像中的點擊事件進行處理時，它不起作用

 $("#content .img").on('click',function()
  {
  //here comes my process, but its not working
   }

請幫我解決這個問題。

Answer 1

嘗試：

$("#content").on("click", ".img", function() {

});

問題是$("#content img")創建了一個jQuery元素集合，這些元素在運行時就存在。 當您開始動態添加新元素時，它們不會自動應用事件偵聽器。

$("#content").on("click", ".img")作用是提供事件委托。 因此，真正發生的是一個事件偵聽器，該事件偵聽器應用於$("#content")但僅在該事件來自具有匹配選擇器（在本例中為.img ）的后代時才觸發。

有關更多信息，請訪問http://api.jquery.com/on/ 。

Answer 2

這樣嘗試

$(document).on('click', '#content .img',function()
{
  ...
});

Answer 3

當您嘗試添加一些動態內容時，總是會出現此問題。 因此，要解決此問題，請始終牢記某些要點。

• 所有這些都使用一些靜態元素來引用您要在其上應用事件的動態元素。 示例：在您的情況下，請嘗試使用

  $("#content").on('click', 'img', function(){ //try using this way make your code works fine.! });