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?

score 2 · Answer 1 · edited May 23 '17 at 10:31

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 '17 at 10:31

Community

1
1

answered Mar 23 '14 at 06:03

jfriend00

683,504
96
985
979

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. – yitwail Mar 23 '14 at 06:47
@yitwail - thx. I've authored these previous answers [here](http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document/12824698#12824698) and [here](http://stackoverflow.com/questions/9711118/why-not-take-javascript-event-delegation-to-the-extreme/9711252#9711252) 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. – jfriend00 Mar 23 '14 at 06:52
@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. – yitwail Mar 23 '14 at 09:11
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`. – jfriend00 Mar 23 '14 at 14:50

score 0 · Answer 2 · answered Mar 23 '14 at 06:02

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

jQuery Functions not applying to dynamically generated content

2 Answers2