在Jquery中使用动态加载的html类

Question

我有一个动态加载的页面，其中包含类产品的div。 jQuery在以下代码中看不到此类。 当我单击产品div时，它什么也没做。 但是，在nav-element上的clicli效果很好。 有什么办法使其兼容吗？

$(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的动态加载页面

您需要使用事件委托 。 您必须使用.on（）使用委托事件方法。

即

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

理想情况下，应使用最近的静态容器替换document 。 这里是".content-white"

例

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

Answer 2

尝试委托事件处理程序

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

    // event delegation to the closest static element
    $(".content-white").on('click', ".product", function () {
        alert("poop");
    });
});