子页面中 jQuery.load 和 $().ready 的计时问题答案

【问题标题】：Timing issue with jQuery.load and $().ready in the child page子页面中 jQuery.load 和 $().ready 的计时问题
【发布时间】：2013-01-15 06:59:50
【问题描述】：

我正在尝试在父页面上使用 jQuery Load 从 URL 动态插入一些子页面。在父页面中，我执行以下操作：

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

数据对象实际上是在文档准备好运行的函数期间添加到子页面中的......

$().ready(function()

我最初注意到的是，在本地运行时，一切都按预期工作。但是，当部署在实际 url 上时，加载完成事件会在 $().ready 在子页面上完成之前触发。第一个问题是这是正确的，有什么办法可以让我只有在子页面上调用 $().ready 之后才能运行我的代码？

我尝试了一种解决方法，即在父页面中使用计时器来检查元素。在很短的时间间隔后，该元素将出现在 dom 中，但其上的数据为空。但是，如果我在按钮单击中运行调试器，我可以在那里看到所有内容..

另一种解决方法是将脚本放在子页面的底部，然后删除准备好的文档。这也不起作用。

有什么建议吗？（我不能过多修改子页面的代码逻辑，需要自包含）

【问题讨论】：

您不应在使用 .load 或 ajax 加载的子页面上包含脚本，它们将在附加内容之前执行，从而导致所有元素选择失败。您可以通过将内容加载为纯文本然后自己解析脚本标签，然后附加 html 并执行脚本来绕过它。
另外，如果您想要更短的$(document).ready(function(){})，请使用$(function(){})。 $().ready(function(){}) 不是该方法的预期使用方式。
似乎可以解决所有问题的是从客户端页面中删除 jQuery 导入。我假设是因为如果存在那么这就是为什么找不到父页面中元素上的 data() 的原因（因为它正在加载到另一个内存空间中？）。因此，我建议任何有此问题的人尝试仅加载包含所需脚本和 html 的片段子页面。

标签： jquery

【解决方案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

【讨论】：

这似乎对我不起作用。通过 jquery load 函数加载页面时，$(window).load 代码永远不会执行。

【解决方案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>

【讨论】：

可能是一个很好的评论，但它肯定是一个糟糕的答案
这绝对是一种方法，尽管 $(function(){}) 没用，因为在执行代码时，文档可能已经解析了几秒钟。虽然不疼。
我同意你的观点，这可能是无用的，我只是觉得安全总比抱歉好
那将是我最后一次尝试。我发现从子页面中删除 jQuery 脚本导入是有效的。