javascript - 如何在动态添加的元素上执行功能？

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 中。

现在我想在这些新创建的 div 上运行这段代码:

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

我尝试将其放入 $(document).ready 函数中，但它在那里不起作用，因为当时 div 不可用。然后我把这个放在我的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();

相反，您应该创建它们并使用该引用:

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

或者你可以简单地将它们链接起来:

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