jQuery -多个$(文档)。准备好了吗?

问题:

如果我链接两个JavaScript文件，都有$(document).ready函数，会发生什么?一个会覆盖另一个吗?还是两个$(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!");
});
< p > < br > 我相信最好的做法是简单地将两个调用合并到一个$(document).ready中，但在我的情况下不太可能
200421 次浏览
小开

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

如果执行顺序很重要，那就把它们结合起来。

小开
最佳答案

所有都将被执行和第一次调用第一次运行的基础!!

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

文档$()时();和其他函数一样。一旦文档准备就绪(即加载)，它就会触发。问题是当多个$(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()调用都必须实际返回。如果在其中一个中抛出异常，则永远不会执行后续(不相关的)调用。

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

这是我在使用第三方库时遇到的一个问题。一个库抛出异常，而后续的库从未初始化任何东西。

小开

不是为了死灵线程，但是在jQuery的最新版本下，建议的语法是:

$( handler )

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

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

请看这个链接:

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


提交答案