Question

我有一个带有类产品div的动态加载页面。 Jquery没有使用下面的代码看到这个类。当我点击产品divs时它没有做任何事情。然而，导航元素上的陈词滥调很好。有什么方法可以使它吗？

$(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()。

即

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

使用Jquery动态加载的html类

2 个答案: