jQuery Functions not applying to dynamically generated content

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?

Community · Accepted Answer · 2017-05-23 10:31:48Z

2

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?

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.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 23, 2014 at 6:03

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

yitwail Over a year ago

jfriend00, I commend you for mentioning 'selector of the closest parent' -- I see too many examples at stackoverflow where 'document' is used, instead, which certainly works but is somewhat lazy.

jfriend00 Over a year ago

@yitwail - thx. I've authored these previous answers here and here on the reasons why you don't want to put everything on the document object so I pay more attention to that aspect, I guess.

yitwail Over a year ago

@jfriend00 - welcome. I read your first answer. That prompted me to read the current jQuery online doc for the on() method, and it specifically advises against attaching events to 'document' or 'body' for pretty much the same reasons you stated -- makes me wonder why attaching to 'document' became as popular as it seems to be.

jfriend00 Over a year ago

In answers on StackOverflow, I think it's often because the OP hasn't show the HTML so the person writing the answer doesn't know what a selector would be for a close parent object so they just put in the one thing they know would work with document. I also think lots of people just don't know why you don't want everything on document.

Kiran · Accepted Answer · 2014-03-23 06:02:55Z

0

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

answered Mar 23, 2014 at 6:02

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Collectives™ on Stack Overflow

jQuery Functions not applying to dynamically generated content

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related