javascriptjqueryjquery-on

How to call a function in every element in the DOM even if they are dynamically created

I want to call a function over specific elements on my DOM, for example:

$(".red").css({backgroundColor: "pink"});

It works ok for any element already existing into the DOM, but I also want to this method to be called in elements dynamically added to the DOM.

I've tried things like:

$(".red").on(function(){ this.css({backgroundColor: "pink"}) });

or:

$(".red").on("load", function(){ this.css({backgroundColor: "pink"}) });

But not any success.

Check the jsFiddle

Update

The .css() call is just an example I actually want to call other kind of functions

Solution

  • You were close. Try:

    $(document).on("load", ".red", function(){ this.css({backgroundColor: "pink"}) });

    Oops, that doesn't work. This does http://jsfiddle.net/4Bv9r/

    $('body').on('DOMNodeInserted', ".red", function(){ $(this).css({backgroundColor: "pink"}) });