Question

我有一些动态内容，我通过jQuery .load（）加载。我一直在尝试使用.on方法，因为不推荐使用.live方法在页面实际存在之前将元素绑定到页面。我能够实现这一点，但在这种特殊情况下，我调用的方法是触发两次。任何想法和/或解决方案将不胜感激。

我在绑定之前尝试了解绑定（＆＃39;点击＆＃39;），这似乎有效，但它会导致我尝试点击的项目在第二次点击时触发。我也尝试了event.stopPropagation没有运气。以下是我目前的代码。我目前正在使用setTimeout方法，直到找到合适的解决方案。

$('#content').unbind('click').on('click', '.alternate-options', function(event){
//setTimeout(function(){
 $('.alternate-option').each(function (index) {
    $(this).bind('click', function (event) {
        event.preventDefault();
        $('.alternate-options li').each(function () {
            $(this).removeClass('current');
        });
        $(this).addClass('current');
    });
 });
//},100);
});

Answer 1

乔尔的回答是正确的，但我认为对将来可能会遇到的其他人解释一下会很有用。

live（）的弃用给人们带来了很多困惑，但是一旦你理解了它，替换推荐的技术确实会好很多。

首先，基础知识。如果您正在向页面动态添加DOM元素，则必须选择一种方法来处理它们上的事件。

一种方法是在动态添加每个元素时手动添加事件处理程序，通常你要么添加一个data- *属性来指示动态添加元素的唯一属性，要么将一个对象粘贴到DOM元素本身，以后可以在事件中检索。

旧的jquery方法允许您使用live（）API简化此过程。在这种情况下，您将拥有一个选择器，并且将监视DOM以查找对该选择器的更改。从开发人员的角度来看，这非常简单，但有一些主要的缺点。有关详细信息，此SO帖子很好地描述了一些问题：What's wrong with the jQuery live method?

更新，更好的方法是使用on（）方法并查看父容器DOM元素，并使用可选的选择器作为过滤器。

这很好用的原因是因为它使用了正常的DOM事件冒泡行为。当你在一个元素上触发一个可冒泡的事件（比如点击）时，该事件自然会“冒泡”到DOM上，并有可能在场景图上的每个父元素上捕获它。

在动态元素的情况下，这非常有效。例如，如果你有一个div，你正在监听点击事件，那么该事件将被捕获到由孩子触发的任何点击事件，而不是在他们被添加到DOM时。

然而，在该点击处理程序中必须做一堆“if”语句以确定被点击的元素是否是您感兴趣的元素，这会有点烦人。这就是为什么聪明jquery团队的人员在on（）函数中添加了可选的filter参数。它让你过滤掉你不关心的元素触发的事件。

这就是为什么Joel的简单示例有效：您不必担心直接向子元素或类似内容添加事件侦听器，您只是在监听容器上的事件并过滤您关心的特定元素

Answer 2

这应该做你想要的：

$("#content").on("click", ".alternate-option li", function () {
    $(".alternate-option li.current").removeClass("current");
    $(this).addClass("current");
});

无需重新绑定事件或其他任何内容。

这里有一个小提琴，说明了这种与动态内容的绑定（包括添加新列表项或完全替换整个列表）：

http://jsfiddle.net/2jKCL/

绑定到动态元素

2 个答案: