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

Question

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

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

Sorry, there's no easy or clean way of doing this cross-browser, assuming you're actually doing something other than `.css`. — Kevin B, Sep 05 '13 at 18:57
Why don't you just add `background-color: pink;` to your CSS for the `.red` rule? — Ian, Sep 05 '13 at 18:58
No, there is not a generic way to call any function on all DOM elements, even those dynamically added. There are ways in code to set styles that apply to all elements. Please explain what you are trying to do. — Dark Falcon, Sep 05 '13 at 19:05
After your update, this problem becomes really more complex. — Itay, Sep 05 '13 at 19:11
@lan @j08691 Sorry for the misunderstanding.. the `.css()` call is just an example — fguillen, Sep 05 '13 at 19:13

score 7 · Accepted Answer · edited Sep 05 '13 at 19:17

7

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

edited Sep 05 '13 at 19:17

fguillen

answered Sep 05 '13 at 19:01

Barbara Laird

1

this doesn't work. http://jsfiddle.net/22kwt/2/ paragraph tags don't have a load event. – Kevin B Sep 05 '13 at 19:01
Just a note, `DOMNodeInserted` doesn't work on IE8 and below. – j08691 Sep 05 '13 at 19:08
If you need to do IE, look at onreadystatechange and/or propertychange events. http://stackoverflow.com/questions/2143929/domnodeinserted-equivalent-in-ie & http://stackoverflow.com/questions/15018590/domnodeinserted-in-the-ie – Barbara Laird Sep 05 '13 at 19:18
1

@fguillen And if you want to support newer browsers since `DOMNodeInserted` is deprecated, you can use a `MutationObserver`: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver . You can detect support and fallback to older methods – Ian Sep 05 '13 at 19:20

rAjA · Answer 2 · 2013-09-05T19:11:43.483

1

If you know the element is going to be added dynamically, the best way should be adding the rules to a stylesheet.

OR you can create style dynamically,

$("<style>").text(".red { background-color: pink; }").appendTo("head");

OR

Add this in your page <style id='d_style'></style> then

$('#d_style').text(".red { background-color: pink; }");

edited Sep 05 '13 at 19:11

answered Sep 05 '13 at 19:05

rAjA

I think it'll be troublesome on IE – Itay Sep 05 '13 at 19:05
1

If what you're trying to do is as simple as changing the css, this is a much better solution. – Barbara Laird Sep 05 '13 at 19:08
Sorry for the misunderstanding.. the `.css()` call is just an example – fguillen Sep 05 '13 at 19:12

2 Answers2