Question

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

我知道我需要将.on绑定到页面上已存在的容器，但是我无法找出改变当前切换的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时显示/隐藏动作？

我想我需要这样的东西：

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

// some action

});

Answer 1

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

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

    // some action

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

    // some action

});

Answer 2

作为第二个参数的选择器仍然可以工作：

$('#grid-container').on({ ...}, '.grid-box');

http://jsfiddle.net/QkFTz/1/

另一种方法就是将它们分开绑定，我个人认为更清楚：

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

使用.on绑定到动态生成的内容

2 个答案: