如何在页面加载完成后调用函数? (只有那时..)

时间:2011-09-10 22:19:22

标签: javascript jquery html ajax

我遇到了一些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(...);
}

3 个答案:

答案 0 :(得分:2)

尝试:

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

...或...

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

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

答案 1 :(得分:1)

来自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标记中。

答案 2 :(得分:0)

试试这个:

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