如何在页面加载完成后调用函数？ （只有那时..）

Question

我遇到了一些jquery代码问题。 在我的HTML页面中，我使用ajax获取一些信息，然后我正在更改HTML元素 与$("#id").html(...)。

问题是，我还有一个$(document).ready代码，我只想调用一次 当页面加载完成后，但在每次更改html与$("#id").html(...)之后 代码再次被调用。

如何只运行一次$(document).ready代码？

以下是一个例子：

$(document).ready(function(){
    // this code will run not only once...
}

function f(){
    $("#id").html(...);
}

Answer 1

尝试：

var run = false;
$(document).ready(function() {
    if(!run) {
        ...
        run = true;
    }
});

...或...

$(window).load(function() {
    ...
});

第一个将确保它只运行一次;整个页面加载完成后运行第二个（如果您需要在图像加载完成后重新调整大小，则非常有用）。

Answer 2

来自the .ready documentation的评论：

  

看起来.ready（）不仅会在页面初始化时触发   DOM，但显然也是在更改DOM之后。这是一个问题，如果   你的就绪处理程序改变了DOM。这将导致ready（）触发   不止一次。如果每次调用，它可能会导致无限循环   为DOM添加更多内容。 Firefox和IE的行为与此不同，   包括不同的错误消息，并将页面显示在中   不同的国家。所以，如果ready（）修改了DOM，那么它就是   明智地有办法检查是否已经准备就绪。

     

回复自我：看来问题的一部分不是那样   准备好的功能再次发射（虽然这可能是显而易见的），   但是更改DOM会导致创建的脚本准备就绪   功能再次发射，添加额外的就绪功能等。   如果javascript嵌入在html中，这似乎就会发生   超出（或包含在）准备好的DOM部分   处理程序修改。 （显然最好把脚本放在那里   在文档头中创建一个就绪函数，但在这种情况下是   不是一个选项。）通过检查全局标志变量来解决问题   在执行jQuery（document）.ready（...）之前未定义。

如果这可能是您的问题，您可以采用相同的解决方案：

var onLoadFired = false;
$(document).ready(function() {

   /* Ensure this function only runs once */
   if (onLoadFired) {
      return;
   }
   else {
      onLoadFired = true;
   }

   /* Business logic */

   // .. your code here ..
});

或者更好的是，将处理程序移动到单独的脚本文件中，该文件包含在页面的script元素中的head标记中。

Answer 3

试试这个：

$(window).bind("load", function() {
   ...
});