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

我使用无限滚动来显示一些内容，但在将一些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 box。如何更改上述内容，以便在进入/离开.grid框时显示/隐藏操作

我想我需要这样的东西：

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

// some action

});

---

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

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

    // some action

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

    // some action

});

---

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

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

    // some action

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

    // some action

});

---

选择器作为第二个参数仍然有效：

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

另一种方法是将它们单独绑定，我个人认为这更清楚：

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

---

选择器作为第二个参数仍然有效：

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

另一种方法是将它们单独绑定，我个人认为这更清楚：

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

---

请参阅这些关于将

.on（）

与动态元素一起使用的帖子：以及这些关于将

.on（）

与动态元素一起使用的帖子：和