javascript - Html div on load event for a dynamically added div element

Question

How i can make some thing like this?

<div id='myDiv' onload='fnName()'></div>

can't use

window.onload = function () {
    fnName();
};

or

$(document).ready(function () {fnName();});

the div element is dynamic. The div content is generated by xml xsl.

Any ideas?

Answer 1

The onload attribute probably wouldn't fire on the <div> if you're injecting it dynamically (as the document is likely already loaded, but maybe it'd still work...?). However you could either poll for the element by simply doing something like this (similar to YUI's onContentAvailable):

// when the document has loaded, start polling
window.onload = function () {
    (function () {
        var a = document.getElementById('myDiv');
        if (a) {
            // do something with a, you found the div
        }
        else {
            setTimeout(arguments.callee, 50); // call myself again in 50 msecs
        }
    }());
};

Or you could change the markup (I know nothing about XSL) to be something like this:

Earlier on in the page:

<script type="text/javascript">
    function myDivInserted() {
        // you're probably safe to use document.getElementById('myDiv') now
    }
</script>

The markup you generate with XSL:

<div id="myDiv"></div>
<script type="text/javascript">
    myDivInserted();
</script>

It's a bit hacky but it should work.