I'm loading an html fragment from another page on the site, into a content div. In the load callback, I'm loading JS unique to the new content.
With the alert() after $.getScript, everything works. Without the alert(), setup() won't run.
- I've tried to wait with
setTimeout/clearTimeout. - I've tried calling
$(document).readyagain. - I've tried in-lining the new JS (w/o getScript).
No joy. Simplified example below:
<html>
<head><!-- load jQuery, stylesheets, etc.--> </head>
<body>
<div id="menupanel">
<!-- menu clicks call jQuery: $('#content').ajaxLoad( myURL ). -->
</div>
<div id="content">
<!-- Content is inserted here by menu clicks.-->
</div>
<script type="text/javascript">
$( function(){
//Function to load a fragment from another page into this page.
function ajaxLoad(url,parms){
var url= url + ' #remoteContent';
$("#content").load( url, parms, callback(sometext) );
}
function callback(sometext) {
//unbind all events on the #content div.
$('#content').off();
//run scripts specific to newly loaded page
//and bind new events to elements on the new page.
$.getScript('getTest.js',function(){
alert('bingo'); //setup() won't run w/o this alert.
setup();
});
}
//handle menu clicks.
$("#menu a").click(function(e){
//etc...
});
}) //document ready
</script>
</body>
</html>
sample code in getTest.js
function setup(){
var myCount= $("#content").find(".subhead_title").length;
$("#content #remoteContent #lotPage #lotText").find(".subhead_title").css('color','green');
console.log('count of subhead titles: '+myCount);
}