在Jquery中使用动态加载的html类 [英] Use classes of dynamically loaded html with Jquery

问题描述

我有一个动态加载的页面，其中包含class产品的div。 Jquery没有看到这个类，下面的代码。当我点击产品div时，它不会执行任何操作。然而，对nav-element的陈述很好。任何方式使它与它一起工作？

I have a dynamically loaded page with divs of class product. Jquery doesn't see this class with the code below. When I click on product divs it doesn't do anything. However clicl on nav-element works fine. Any way to make it work with it?

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

推荐答案

尝试委托事件处理程序

$(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类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！