Question

我有一个包含许多部分的主页面。这些部分中的每一部分都定义了一个（文档）.ready事件，调用一个函数。该功能是唯一的，并在部分本身内定义。 E.g。

main.htm中

section1：定义funcABC（）。（document）.ready调用funcABC（）;

第2节：定义funcDEF（）。（document）.ready调用funcDEF（）;

section3：定义funcXYZ（）。（document）.ready调用funcXYZ（）;

等。

所以页面加载，每个部分调用它需要的功能，一切正常。

现在已经更改页面以通过AJAX（jquery.load（））加载部分。上面显示的布局不再用作（文档）.ready只在Main.htm加载时触发，但不会加载部分。

Main.htm无法调用各个部分中的函数，因为它不知道每个部分需要哪些部分，并且没有定义（在每个部分中动态生成）。 / p>

我知道这个设计很奇怪，它是我继承并且必须合作的东西..

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

Answer 1

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

function() myFunction {
    //...
}

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

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

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

Answer 2

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

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

如果您正在使用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
    }    
  }
}

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

2 个答案: