jQuery - 多个$(文档).ready ...？

Question

题:

如果我链接两个带有$(document).ready函数的JavaScript文件,会发生什么？有人会覆盖另一个吗？或两者都$(document).ready被召唤？

例如,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});

我确信最好将两个调用组合成一个单独$(document).ready但在我的情况下不太可能.

Answer 1

一切都将被执行,并在第一次调用第一次运行的基础上!!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

演示如您所见,它们不会相互替换

还有一件事我想提一下

代替这个

$(document).ready(function(){});

你可以使用这个快捷方式

jQuery(function(){
   //dom ready codes
});

Answer 2

重要的是要注意每个jQuery()调用必须实际返回.如果在一个异常中抛出异常,则永远不会执行后续(不相关)调用.

无论语法如何,这都适用.您可以使用jQuery(),或者jQuery(function() {}),$(document).ready()无论您喜欢什么,行为都是一样的.如果早期的一个失败,后续的块将永远不会运行.

使用第三方库时,这对我来说是一个问题.一个库抛出异常,后续的库从未初始化任何东西.

Answer 3

$(文件).就绪(); 与任何其他功能相同.一旦文件准备好就会触发 - 即装载.问题是当多个$(document).ready()被触发时,当你在多个$(document).ready()中触发相同的函数时会发生什么

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

两者的行为完全相同.唯一的区别是,虽然前者会达到同样的效果.后者运行速度会快一点点,并且需要更少的打字.:)

总之,只要有可能只使用1 $(文件).ready();

//老回答

它们都会按顺序被调用.最佳做法是将它们结合起来.但不要担心,如果它不可能.页面不会爆炸.

Answer 4

执行是自上而下的.先到先得.

如果执行顺序很重要,请将它们合并.

Answer 5

两者都会被调用,先到先得.看看这里.

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

输出:

准备好文件2被叫!