JQuery.load can receive a callback function as one of its parameters.
According to the online docs, this function is called "when the ajax
request is complete". In practice, it appears this callback is
performed after the ajax request is complete and after the dom is
inserted, but before new javascript in the HTML is evaluated. Is there
a way to set a callback for after the javascript is evaluated?
For example:
index.html contains:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loadindex").click(function(){
$(this).hide();
$("#loaddiv").load("index2.html", { game : 'lnb' }, function() {
//alert("ajax done");
// The next line will fail with "markLoaded" undefined.
// However, if the previous "alert()" call is uncommented,
// effectively adding a delay, markLoaded() is defined and
// successfully called.
markLoaded();
});
});
});
</script>
</head>
<body>
<div id="loadindex">Click to load Index 2</div>
<div id="loaddiv"></div>
</body>
</html>
index2.html contains:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript">
function markLoaded() {
$(".loadingstatus").html("loaded");
}
</script>
</head>
<body>
Index 2 <span class="loadingstatus">loading</span>
</body>
</html>
