如何在動態添加元素上執行函數？

Question

我在jQuery中有一個ajax post函數。 Ajax調用的響應被傳遞到產生一堆div元素，像這樣的處理程序：

function handleResponse(data) 
{ 
     $.post( 
      "ajax.php", 
      { 
       url: url, 
       action: "getProductImages" 
      }, 
      function(data) 
      { 
       var obj = jQuery.parseJSON(data); 
       newDiv = ""; 
       jQuery.each(obj, function(key,value) 
       { 
        newDiv += '<div class="product-img-container">\ 
        <img src="'+value+'"></div>'; 
       }); 
       $("#product-images").empty(); 
       $(newDiv).appendTo('#product-images'); 
      } 
} 

正如你可以看到我創建product-img-container類新的div，並將其呈現內product-images格。

現在，我想在這些新創建的div運行這段代碼：

$('.product-img-container').productThumb(); 

我試圖把這裏面$(document).ready功能，但由於申報單不可用當時並不在那裏工作。然後我把這個我 handleResponse函數內部，如：

.... 
$("#product-images").empty(); 
$(newDiv).appendTo('#product-images'); 
$(newDiv).productThumb(); 

不工作，要麼:(

Answer 1

newDiv只是一個字符串當調用$(newDiv)，jQuery是爲您創建DOM元素。

您嘗試的代碼執行以下操作：

// Create DOM elements and append to #product-images 
$(newDiv).appendTo('#product-images'); 

// Create DOM elements and attach events. 
// These DOM elements are different! You never attach them to the DOM. 
$(newDiv).productThumb(); 

相反，你應該CRE吃了他們，並使用參考：

var $newDiv = $(newDiv); 
$newDiv.appendTo('#product-images'); 
$newDiv.productThumb(); 

或者你可以簡單地把它們連：

$(newDiv).appendTo('#product-images') 
     .productThumb();