jQuery-多个$（document）.ready ...？

题：

如果我链接两个都带有$(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但是在我的情况下这是不可能的。

所有人都会被执行，并且在首次调用的基础上运行！！

<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
});

重要的是要注意，每个jQuery()调用实际上必须返回。如果抛出一个异常，则后续（无关）调用将永远不会执行。

这与语法无关。您可以使用jQuery()，jQuery(function() {})，$(document).ready()，任何你喜欢的，行为是一样的。如果早期模块失败，则后续的模块将永远不会运行。

使用第三方库时，这对我来说是个问题。一个库引发异常，随后的库从未初始化任何东西。

$（document）.ready（）; 与任何其他功能相同。一旦文档准备就绪（即加载），它将触发。问题是关于在触发多个$（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 $（document）.ready（）;

//旧答案

他们都会被依次召唤。最佳实践是将它们结合起来。但不要担心，如果不可能。该页面不会爆炸。

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

如果执行顺序很重要，请合并它们。

两者都会被叫，先到先得。在这里看看。

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

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

输出：

准备好文档2！

不是要破坏线程，而是在最新版本下jQuery建议的语法是：

$( handler )

使用匿名函数，这看起来像

$(function() { ... insert code here ... });

看到这个链接：

https://api.jquery.com/ready/