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

Question

I've been trying to apply my jQuery functions to dynamically generated content by using the .on API from jQuery, but it's not working as it's suppose to. The purpose of the code is to display a set of options only when a user hovers over the div ".feed_post_full", and it does. Although it doesn't apply to content that is dynamically generated.

Here is my code here:

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

What should I do to fix it?

Answer 1

You need to use the delegated form of .on() for it to work with dynamically create elements. You want this form:

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

See these other posts for more explanation:

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?

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

Your code would look like this:

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

Where the parent selector is a selector of the closest parent to your dynamic content that is not itself dynamic.

Answer 2

Try this:

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

Best way to improve performance:

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