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();

如何在动态添加元素上执行函数？

1 个答案: