使用此选择器的Jquery fadeOut

Question

我试图让一个元素在点击时消失，元素是动态的。

$("#toast-container").on("click", "div.toast", function() {
    $(this).fadeOut("fast", function() {
         $(this).remove();
    });
}); 

我只使用$(this).remove()尝试了代码并且它可以正常工作，但是使用fadeOut却没有。我不知道为什么，它看起来对我来说绝对没问题

Answer 1

我有一个简单的解决方案。

HTML

<div id="toast-container">
   <div class="toast">
      Click Me
   </div>
</div>

的jQuery

$("div.toast").click(function(){
    $(this).parent("#toast-container").fadeOut('slow');
    // run your another event.
})

在jsfiddle

上查看我的实时演示

Answer 2

当向DOM树动态添加元素时，我认为您的事件可能会在创建页面时注册，但是当您动态添加元素时，您应该使用另一个名为delegate的jquery函数 see the documentation

Answer 3

这是什么？

"div.toast"

如果您的div类是“toast”，它应该只是“.toast”（它将与div.toad一起使用，但从语法上讲，这不是真的正确。

那就是说，当我把它放在小提琴里时你的功能很好。您确定您没有收到任何可能与其他功能/功能相关的控制台错误吗？检查你的控制台。