Is there a function that gets triggered when an element is rendered?

Question

Is there some sort of on render function in jQuery. I'd like this function to get triggered whenever a new element with the specified class or ID is added on the screen, either on the page load, or after AJAX requests that return HTML.

Edit: I want a callback that fires whenever a new element with the class or ID that I've defined is created. Not when something changes. I'd prefer not to use a plugin.

This may be helpful: http://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly — Control Freak, Feb 16 '12 at 14:23
possible duplicate of [How to detect new element creation in jQuery?](http://stackoverflow.com/questions/3384398/how-to-detect-new-element-creation-in-jquery) — Diodeus - James MacFarlane, Feb 16 '12 at 14:23
A change would imply that the element already exists. I'd like something that triggers when the element is added. — Jeffrey, Feb 16 '12 at 14:24
is this what you are looking for ? http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener — Gabo Esquivel, Feb 16 '12 at 14:24
@GaboEsquivel: Hmm, you've given me an idea: listen for HTML changes, and loop through all the elements with an each loop. Thanks! — Jeffrey, Feb 16 '12 at 14:28

score 0 · Answer 1 · answered Feb 16 '12 at 14:25

mmmmm.....

My Advice :

Create a Factory function of Creation of elements .

Every time you want to create an element ,

pass it through a centrelized function WHICH create the element.

She will have prameter of "what to create"

and she will create it.

then , put your code for "after creating element" in the same func

score 0 · Accepted Answer · edited Jul 27 '18 at 02:39

0

I'm solving it this way:

$('html').change(function() {
    $('.element').each(function() {
        // Do stuff.
    });
});

This way I can have an array that keeps track of all my elements, and when a HTML change is triggered check if there are elements that are not in my array, thus new elements.

edited Jul 27 '18 at 02:39

david

3,225
9
30
43

answered Feb 16 '12 at 14:31

Jeffrey

1,985
1
12
21

You may want to implement the observer pattern http://addyosmani.com/blog/understanding-the-publishsubscribe-pattern-for-greater-javascript-scalability/ – Gabo Esquivel Feb 16 '12 at 14:39

score 0 · Answer 3 · answered Feb 16 '12 at 14:36

There is a new event for that but as usual it won't work for < IE9:

<head>
    <script type="text/javascript">
    function AddTextToContainer () {
        var textNode = document.createTextNode ("My text");
        if (textNode.addEventListener) {
            textNode.addEventListener ('DOMNodeInserted', OnNodeInserted, false);
        }

        var container = document.getElementById ("container");
        container.appendChild (textNode);
    }

    function OnNodeInserted (event) {
        var textNode = event.target;
        alert ("The text node '" + textNode.data + "' has been added to an element.");
    }
    </script>
</head>
<body>
    <div id="container" style="background-color:#e0d0a0; width:300px; height:100px;"></div>
    <br /><br />
    <button onclick="AddTextToContainer ();">Add a text node to the container!</button>
</body>

Actually... seems it's also been deprecated. Strange since IE9 just got it :). Read the warning label. http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted — Asken, Feb 16 '12 at 14:38

score -1 · Answer 4 · answered Feb 16 '12 at 14:25

$(document).on('DOMSubtreeModified',function(){
    // something changed
});

Maybe this works for you but I'm not sure if every browser supports this event. EDIT: Even this event is deprecated. So you should not use it. Quick overview about events available:

http://www.quirksmode.org/dom/events/#t18

Is there a function that gets triggered when an element is rendered?

4 Answers4