'Defer JavaScript execution till the content has been added to Document

I am trying to load some content into a page using Ajax. The html that is loaded contains some JavaScript code. Even though the code is wrapped within $(document).ready, it gets executed before the content is inserted into the document, because the parent document's Dom is ready by the time the content is loaded.

How can I defer the execution of the code, until the content has been inserted into the document. Here is the html that I am trying to load (this is the code for openid-selector)

<script type="text/javascript" src="/js/openid-jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    alert('ajax-html');
    openid.init('openid_identifier');
});
</script>
<!-- Simple OpenID Selector -->
<form action="try_auth.php" method="get" id="openid_form">
    <input type="hidden" name="action" value="verify" />

    <fieldset>
            <legend>Sign-in or Create New Account</legend>

            <div id="openid_choice">
                <p>Please click your account provider:</p>
                <div id="openid_btns"></div>
            </div>

            <div id="openid_input_area">
                <input id="openid_identifier" name="openid_identifier" type="text" value="http://www.joycebabu.com" />
                <input id="openid_submit" type="submit" value="Sign-In"/>
            </div>
    </fieldset>
</form>

Update : Removed the noscript tag



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source