Javascript jQuery函数不适用于动态生成的内容

我一直在尝试使用jQuery中的.on API将jQuery函数应用于动态生成的内容，但它并没有按预期工作。代码的目的是仅当用户将鼠标悬停在div“.feed\u post\u full”上时才显示一组选项，它确实显示了这些选项。尽管它不适用于动态生成的内容

这里是我的代码：

$(".feed_post_full" ).on({
mouseenter: function() {
    var id = (this.id);
    $('#post_options'+id).show();
}, mouseleave: function() {
    var id = (this.id);
    $('#post_options'+id).hide();
}});

我应该怎么做才能修复它？

试试以下方法：

$(document).on({
    mouseenter: function() {
    var id = (this.id);
    $('#post_options'+id).show();
}, mouseleave: function() {
    var id = (this.id);
    $('#post_options'+id).hide();
}
}, ".feed_post_full");

提高性能的最佳方法：

 $("FEED_POST_FULL_PARENT_ELEMENT_AVAILABLE_ON_DOM_READY").on({
        mouseenter: function() {
        var id = (this.id);
        $('#post_options'+id).show();
    }, mouseleave: function() {
        var id = (this.id);
        $('#post_options'+id).hide();
    }
    }, ".feed_post_full");

---

您需要使用委托形式

.on（）

，以便它能够动态创建元素。您需要此表单：

$('#static_parent').on(events, ".dynamic_child", function() {});

有关更多说明，请参见以下其他帖子：

您的代码如下所示：

$(parent selector).on({
    mouseenter: function () {
        var id = (this.id);
        $('#post_options' + id).show();
    },
    mouseleave: function () {
        var id = (this.id);
        $('#post_options' + id).hide();
    }
}, ".feed_post_full");

---

父选择器是与动态内容最接近的父级的选择器，而动态内容本身不是动态的。

jfriend00，我建议您提及“最接近父级的选择器”--我在stackoverflow中看到太多使用“document”的示例，这当然有效，但有点懒惰。@yitwail-thx。我已经撰写了这些以前的答案，以及您不想将所有内容都放在

文档

对象上的原因，所以我想我会更加关注这方面。@jfriend00-欢迎您。我读了你的第一个答案。这促使我阅读了当前jQuery online文档中的

on（）

方法，它特别建议不要将事件附加到“document”或“body”上，原因与您所说的几乎相同——这让我想知道为什么附加到“document”会变得如此流行，我认为这通常是因为OP没有显示HTML，所以写答案的人不知道一个接近的父对象的选择器是什么，所以他们只输入一个他们知道可以使用

文档的东西。我还认为很多人只是不知道为什么你不想要
文档中的所有内容。