Question

以下代码未将事件绑定到附加元素（使用.insertBefore()）。

根据我的理解，.on()应该像.live()一样工作。情况不是这样吗？

<div class="todoColumn">
    <div class="projectHeader">
        <div class="title">Example</div>Subtitle
    </div>

    <div class="todo">
        <div class="checkbox"><span class="check pictos">3</span></div>

        <div class="text">another test</div>

        <div class="floatfix"></div>
    </div>

    <div class="todo">
        <div class="checkbox"><span class="check pictos">3</span></div>

        <div class="text">another test</div>

        <div class="floatfix"></div>
    </div>
</div>

    $('.todoColumn .todo .checkbox').on('mouseenter', function() {
        $(this).find('.check').css('visibility','visible');
    });

Answer 1

要以您想要的方式使用它，您需要将选择器放在函数中并将事件绑定到文档：

$(document).on("mouseenter", ".column .todo .checkbox", function(){
    // do stuff
});

并且，就像jfriend00建议的那样，将事件绑定到最近的父级是更有效的：

$(".column .todo").on("mouseenter", ".checkbox", function(){
    // do stuff
});

Answer 2

这取决于您放置选择器的位置。将它放在第一个jQuery对象中没有任何.live()行为。它绑定静态事件处理程序。

在jQuery对象中指定注释父对象并将选择器放入.on()的参数中，可以为您提供实时行为：

$(document.body).on('mouseenter', '.todoColumn .todo .checkbox', function() {
    $(this).find('.check').css('visibility','visible');
});

如果选择一个比document.body更接近实际对象的公共父级，它将更有效（并且优于.live()）。 .live()的一个问题是文档对象上有太多的事件处理程序（都有选择器来检查）。 .on（）的工作方式更像.delegate()，并允许您将事件处理程序放在更接近实际对象的公共父级上。

编辑：既然你已经包含了你的HTML，那么更有效的代码就是jQuery对象中的公共父选择器和.on()参数中最简单的选择器：

$('.todoColumn').on('mouseenter', '.checkbox', function() {
    $(this).find('.check').css('visibility','visible');
});

.on（'mouseenter'...未检测到附加元素（jQuery）

2 个答案: