javascript - 使用 Jquery 动态加载 html 的类

Question

我有一个动态加载的页面，其中包含类产品的 div。 Jquery 在下面的代码中看不到这个类。当我单击产品 div 时，它没有执行任何操作。然而，nav-element 上的 clicl 工作正常。有什么办法让它工作吗？

$(document).ready(function(){
$(".nav-element").click(function(){
    var id = $(this).attr('id');
    alert(id);
    $(".nav-element").css("background", "#fff");
    $("#"+id).css("background", "#A4CFBE");
    $(".content-white").load(id+".html");
    });
    $(".content-white").load("nav-element1.html");
$(".product").click(function(){
    alert("poop");
})
}); 

Answer 1

带有产品类 div 的动态加载页面

您需要使用Event Delegation 。您必须使用.on()使用委托(delegate)事件方法。

即

$(document).on('event','selector',callback_function)

理想情况下，您应该将 document 替换为最接近的静态容器。这是“.content-white”

示例

$(".content-white").on('click', '.product', function () {
    alert("poop");
});