jquery interact with elements added to the DOM

Question

I'm using a wordpress plugin to add classes to comments as 'editors' picks'.

On the page I have two buttons, one to show the comments and one to show the editors picks. All is working just fine.

Code:-

$(document).ready(function () {


    $("#editors-picks").on("click", function(e){

        $("ol.commentlist li").not(".featured").fadeOut(); // fade out any comments that aren't 'featured'

    }); 
    $("#comments").on("click", function(e){

        $("ol.commentlist li").not(".featured").fadeIn(); // fade all comments back in

    });
});

The problem is comments dynamically added to the DOM tree(via ajax). After a new comment is added the function doesn't work. I thought using .on would fix this, but it does not.

score 1 · Answer 1 · answered Aug 31 '13 at 00:09

If "the function doesn't work" means that the button isn't responding, you could try delegating the listener to the document, not the element itself. For example:

$(document).on("click","#editors-picks", function(e){

    $("ol.commentlist li").not(".featured").fadeOut(); // fade out any comments that aren't 'featured'

});

However, if you meant that newly added comments aren't affected by the function while older ones do, then I don't know how could that be.

jquery interact with elements added to the DOM

1 Answers1