Question

第一个.click函数用于在容器中添加元素（div），第二个用于从容器中删除它。容器最初没有元素。通过单击删除该功能无效

$(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元素添加点击处理程序时，您只是将事件添加到在特定时刻具有该类的元素;例如没有。

相反，你需要像这样使用事件委托;

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

这将有效，因为它将事件绑定到document（始终存在），该事件使用事件委派来侦听任何.class2元素的点击。有关详细信息，请阅读on()文档。

Answer 2

为两个类使用委托事件处理程序（如果你在两个类之间切换，或者如果你不回到class1那么第二个就足够了），因为在更改class元素后会被视为动态。

$("#container").on("click", ".class1", function(){

});

$("#container").on("click", ".class2", function(){

});

此处#container指的是这些类的父级，您可能还有其他内容。

Answer 3

当您尝试添加代码以点击.class2时，它还没有按照我的理解创建。在创建.class2元素后，尝试添加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);

        });
    });
});

Answer 4

在详细说明函数时，不能对不存在的元素强制转换事件。但是，您可以在“class1”和“class2”周围创建一个包装元素（div），如下所示：

<div id="class1_wrapper">
  <span class="class1">
</div>

我对class1使用了“span”，因为我不知道它是哪个元素。然后，您可以使用“on（）”：

而不是click事件

 $("#class1_wrapper").on("click", ".class1", function ()
 {
   //Code for adding element to the container and removing class1 from it and adding class2
 });

这样，即使class1不存在（同样可以为class2完成），click事件也会运行

第二个.click（）函数不起作用

4 个答案: