jquery - 第二个 .click() 函数不起作用

Question

第一个 .click 函数用于在容器中添加元素(div)，第二个 .click 函数用于将其从容器中删除。容器最初没有元素。通过点击删除该功能不起作用

$(document).ready(function(){
    $(".class1").click(function(){
       //Code for adding element to the container and 
       // removing class1 from it and adding class2

    });

    $(".class2").click(function(){
       alert("hi");   //Even the alert is not displayed
       $(this).fadeOut(100);    
    });
});

但是，如果在页面加载到容器中之前该元素已经存在，则它会起作用。有什么理由吗？是因为 document.ready 函数吗？解决方案？

Answer 1

这是因为当您为 .class2 元素添加点击处理程序时，您只是将事件添加到在特定时间具有该类的元素中>;例如没有。

相反，您需要像这样使用事件委托(delegate)；

$(document).on('click', '.class2', function () {
    alert('hi');
    $(this).fadeOut(100);
});

这将起作用，因为它将事件绑定(bind)到 document (始终存在)，该文档使用事件委托(delegate)监听对任何 .class2 元素的点击。欲了解更多信息，请阅读on()文档。