javascript - Ensure that Kinetic code ALWAYS executes AFTER externally loading DIV -

i'm using the boxer library www.formstone.it display modal popup window on html page. on triggering modal window, html content gets loaded modal div file on server. boxer code:

$(".boxer.boxer_object").click(function(e) {      e.preventdefault();     e.stoppropagation();      $obj = $('<div class="outer_container" />').load("http://www.myserver.com/game_modal.html",function(){      settimeout(function (){          ... kinetic code loads several image , gui elements simple game ...      }, 2000); // delay kinetic code execution 2 seconds      $.boxer($obj);  }); 

even though seemingly execute kineticjs code after html code has loaded, still sporadically following error:

uncaught typeerror: cannot set property 'innerhtml' of null

as understand it, error occurs when canvas trying target div not yet exist. in other words, kineticjs code executes after code has loaded before relevant container div has become part of page structure.

as seen in code above, use settimeout() function delay kineticjs code execution 2 seconds. though less ideal, have not seen error again, game graphics loading every time. however, fix may working on browser may fail else in other conditions.

is there proper way in ensure kineticjs code execute after externally loaded html code has become part of page structure? i.e. after container div kineticjs code targets html5 canvas exists?

you should able skip ajax call , render game's container , loading markup manually:

var $game = $('<div id="outside_container" style="text-align:center; width:900px; height=600px;"><span style="display:inline-block; line-height:600px; font-size: 4em;">loading...</span></div>'); 

then use 'callback' option initialize game:

$boxer($game, {     callback: initgame });  function initgame() {     // kinetic js code     ... }