Question

我一直在尝试通过使用jQuery中的.on API将我的jQuery函数应用于动态生成的内容，但它并没有像它想象的那样工作。代码的目的是仅当用户将鼠标悬停在div“.feed_post_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();
}});

我该怎么办才能修复它？

Answer 1

您需要使用.on()的委托形式才能使用动态创建元素。你想要这个表格：

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

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

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

您的代码如下所示：

$(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");

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

Answer 2

试试这个：

$(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");

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

2 个答案: