Javascript 确保在外部加载DIV后始终执行动力学代码

我使用在HTML页面上显示一个模式弹出窗口。触发模式窗口时，HTML内容将从服务器上的文件加载到模式DIV中。拳击手守则：

$(".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 which loads several image and GUI elements for a simple game ...

    }, 2000); // delay Kinetic code execution with 2 seconds

    $.boxer($obj);

});

$（“.boxer.boxer\u对象”）。单击（函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$obj=$（''）。加载（'http://www.myserver.com/game_modal.html“，函数（）{
setTimeout（函数（）{
…为一个简单游戏加载多个图像和GUI元素的动态代码。。。
}，2000）；//延迟动态代码执行2秒
美元。博克瑟（obj）；
});

尽管它似乎只在加载HTML代码后执行KineticJS代码，但我仍然偶尔会遇到以下错误：

未捕获的TypeError:无法将属性“innerHTML”设置为null

据我所知，当画布试图以一个尚不存在的DIV为目标时，会发生此错误。换句话说，KineticJS代码在加载代码后但相关容器DIV成为页面结构的一部分之前执行

正如上面代码中所示，我现在使用setTimeout（）函数将KineticJS代码的执行延迟2秒。尽管不太理想，但我没有再次看到错误，每次都加载游戏图形。不过，这是一个修复程序，可能在我的浏览器上运行，但在其他情况下可能会失败

---

是否有适当的方法确保KineticJS代码在外部加载的HTML代码成为页面结构的一部分后始终执行？即，在KineticJS代码针对HTML5画布的容器DIV实际存在之后？

免责声明：我没有使用boxer

我快速浏览了一下你的拳击手链接

有一个“打开实例后”执行的回调

---

把你的动态代码放在你可以提供给boxer的回调函数中怎么样。

据我所知，当发生

onclick

事件时，你正试图用'outer_container'类创建一个

div

。然后你想从你的web服务“加载”你的游戏模式，然后运行动态js和boxer c在返回ode时异步（通过回调）ode

异步功能总是有点复杂。在异步事件链中，我认为在为其附加.load（）函数的同时创建

div

，这意味着有时web服务可能在创建

div

之前就准备好了

在调用指向该元素的web服务之前，您是否尝试过创建

div

元素

您可以在首次初始化页面时创建

div

，也可以尝试以下操作

$(".boxer.boxer_object").click(function(e) {

    e.preventDefault();
    e.stopPropagation();

    //create the div first before the web service call to ensure it exists...

    var obj = document.createElement('div');
    obj.setAttribute('class', 'outer_container');

    $('.outer_container').load("http://www.myserver.com/game_modal.html",function(){

        //your code here, called after the web service has returned data...

        $.boxer(obj);

    });

我个人会在声明

onclick

事件之前声明'outer_container'

div

---

我希望这有帮助：）。

您应该能够跳过ajax调用，手动渲染游戏容器和加载标记：

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>');

---

我也尝试过类似的零星错误。似乎加载外部HTML代码的完成并不能保证所需的DIV及时成为页面结构的一部分。哎哟！好吧，那么您可能必须执行jquery ajax请求的长格式，并将async属性设置为false：谢谢Ben！测试表明解决方案坚如磐石，w该解决方案使用Boxer的回调选项在模式窗口初始化后执行一个函数。请参阅Boxer网页。在initGame（）函数中，我使用jQuery getScript（）加载并执行一个JS文件，其中包含KineticJS游戏代码（由服务器动态生成）.谢谢你的回答，但我的代表权太低，无法投票支持他们。

$boxer($game, {
    callback: initGame
});

function initGame() {
    // kinetic js code
    ...
}