具有 AJAX 加载部分的页面是否有等效的 document.ready？答案

【问题标题】：Is there document.ready equivalent for page with AJAX loaded sections?具有 AJAX 加载部分的页面是否有等效的 document.ready？
【发布时间】：2014-05-09 02:57:43
【问题描述】：

我有一个包含多个部分的主页。这些部分中的每一个都定义了一个 (document).ready 事件，调用一个函数。该功能是唯一的，并在部分本身内定义。例如

Main.htm

section1 :定义 funcABC()。 (document).ready 调用 funcABC();

section2 :定义 funcDEF()。 (document).ready 调用 funcDEF();

section3 :定义 funcXYZ()。 (document).ready 调用 funcXYZ();

等等。

页面加载完毕，每个部分都调用它需要的函数，一切正常。

页面现在已更改为通过 AJAX (jquery.load()) 加载部分。上面显示的布局不再作为 (document).ready 工作，仅在 Main.htm 加载时触发，而不是部分已加载。

Main.htm 不能调用section 中的函数，因为它不知道每个section 需要哪个，也没有定义（在每个section 中动态生成）。

我知道这个设计很奇怪，它是我继承下来的东西，必须使用..

我基本上需要每个部分在加载后都有自己的功能，就像它正在做的那样。我怎样才能做到这一点？

【问题讨论】：

您应该能够在 jquery.load() 的回调函数中指定函数调用。将每个部分的函数的定义作为每个部分的回调。
我认为这篇文章可能是您正在寻找的内容 [stackoverflow.com/questions/12773600/… [1]: stackoverflow.com/questions/12773600/…
jquery 的ajax 方法允许您利用多个处理程序（done、fail、always）来实现您的目的。将加载的部分作为成功处理程序中的第一条指令插入，然后调用特定于部分的函数。

标签： javascript jquery

【解决方案1】：

(document).ready 是加载 DOM 时的事件处理程序，但是，您触发了一些 AJAX 事件，并且您希望在事件成功完成时执行一个函数。服务器响应时执行的函数称为回调函数。假设您有一个函数，如下所示：

function() myFunction {
    //...
}

您希望myFunction 作为回调函数执行。假设您使用jquery.load，如下所示：

$( "#result" ).load( "ajax/test.html", function() {
   myFunction();
});

这是一个事件处理程序，它向"ajax/test.html" 发送请求，当响应到达时，执行作为参数传递的未命名函数。这个未命名的函数调用myFunction。

【讨论】：

【解决方案2】：

如果我理解正确，您有多个 AJAX 调用，并且希望在它们都完成后做一些事情。这与与加载 DOM 相关的 jQuery(document).ready() 无关。这是您的应用程序的逻辑。

一个简单的解决方案（有点特别）如下：

如果您使用 jQuery.ajax() 调用，它们都有 done/fail/always 回调，您可以使用它来通知其他一些函数它们已完成（如果您不使用jQuery.ajax，然后找到相关的钩子/回调并相应地调整下面的代码示例。
那么你可以在 3 次 ajax 调用完成后做一些事情：

function ABC(){
  $.ajax({url:'...'}).always(waitForThemToFinish);
}
function DEF(){
  $.ajax({url:'...'}).always(waitForThemToFinish);
}
function GHI(){
  $.ajax({url:'...'}).always(waitForThemToFinish);
}

var finished = 0;
function waitForThemToFinish(){
  if (finished < 3) { // To ensure that the operation below is called only once
    finished++;
    if (finished >= 3) {
      // do something after some 3 ajax calls have finished
    }    
  }
}

【讨论】：