javascript - 使用 .on 绑定(bind)到动态生成的内容

Question

我正在使用 Infinite Scroll 来显示一些内容，但我无法将一些 mouseenter/mouseleave 事件绑定(bind)到新生成的项目。

我知道我需要将 .on 绑定(bind)到页面上已经存在的容器，但我无法弄清楚更改当前切换的 jQuery 的语法。

这是当前的js:

$(document).ready(function() {
    $('.grid-box .actions').hide();

    $('.grid-box').on({
        mouseenter: function () {
            $(this).find('.actions').show();
        },
        mouseleave: function () {
            $(this).find('.actions').hide();
        }
    });

});

主容器是#grid-container，每个单独的项目都是.grid-box。我怎样才能改变上面的内容，以便在进入/离开 .grid-box 时显示/隐藏 Action ？

我想我需要这样的东西:

$('#grid-container').on('mouseenter mouseleave', '.grid-box', function(e) {

// some action

});

Answer 1

确切地说，这就是所谓的事件委托(delegate)，它会等待事件冒泡，然后根据选择器匹配事件。这样效率要高得多，因为只注册了一个处理程序，而不是元素数量的 N 倍。此外，您只需绑定(bind)一次，而不是每次更改动态内容时都绑定(bind)。

$('#grid-container').on('mouseenter', '.grid-box', function(e) {

    // some action

}).on('mouseleave', '.grid-box', function(e) {

    // some action

});