jQuery的计时问题.Load和$().在子页中准备好了

Question

我试图在父页面上使用jQuery加载从URL动态插入一些子页面。在父页面，我做了这样的事情:

var html = gridDiv.load(self.options.url, function(html, status, xhr)
{
gridDiv.find("myObject:first").data("objectInstance");
    //do something....
});

数据对象实际上是在文档就绪时运行的函数中添加到子页中的…

$().ready(function()

我首先注意到的是，在本地运行时，一切都如预期的那样工作。但是当部署在一个实际的url上时，加载完成事件会在$()之前触发。准备在子页上完成。第一个问题是这是正确的，是否有任何方法可以让我只能在$()之后运行我的代码。在子页上调用Ready ?

我尝试了一个解决方法，在父页面中使用计时器来检查元素。在很短的时间间隔后，元素将出现在dom中，但其上的数据为空。然而，如果我在一个按钮中运行调试器，点击我可以看到它的全部。

另一个解决方法是将脚本放在子页面的底部，然后删除文档。

有什么建议吗?(我不能修改太多的子页面上的代码逻辑，它需要是自包含的)

Answer 1

当您在本地运行代码时，您不会真正看到加载时间延迟。代码的问题是

    $().ready(function(){})
    //executes when HTML-Document is loaded and DOM is ready

所以我建议你用

    $(window).load(function(){});
    // executes when complete page is fully loaded, including all frames, objects, scripts and images

Answer 2

您是否尝试过将要执行的代码放入函数中，然后在子页面上调用该函数?

例如:

//main page
$.ajax({
    url: "child.html",
}).done(function(data, xhr, status){
    $('body').append(data);
});
function child_finished_loading(){
    alert('child is done!');
}

和

//returned through ajax (child)
<span>This is being appended to main page!</span>
<script type="text/javascript">
    $(function(){
        child_finished_loading();
    });
</script>