9

第一个 .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 功能吗？解决方案？

4

4 回答 4

17

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

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

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

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

于 2012-06-22T10:29:30.020 回答
3

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

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

});

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

});

这里#container指的是那些类的父类，你可能有别的东西。

于 2012-06-22T10:29:34.207 回答
1

当您尝试添加要单击的代码时，.class2据我所知，它尚未创建。.class2在创建这样的元素后，尝试添加点击事件：

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

        });
    });
});
于 2012-06-22T10:29:28.723 回答
0

无法将事件投射到详细说明函数时不存在的元素上。但是，您可以围绕“class1”和“class2”创建一个包装元素 (div)，如下所示：

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

我对 class1 使用了“span”，因为我不知道它是哪个元素。然后，您可以使用“on()”来代替点击事件：

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

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

于 2012-06-22T10:33:27.900 回答