你可以有多个$(document).ready(function(){…}); 板块?

如果我在启动时有很多function,他们都必须在一个单一的:

$(document).ready(function() { 

或者我可以有多个这样的陈述?

你可以有多个,但并不总是最好的事情。 尽量不要过度使用它们,因为这会严重影响可读性。 除此之外,这是完全合法的。 请看下面:

http://www.learningjquery.com/2006/09/multiple-document-ready

试试这个:

 $(document).ready(function() { alert('Hello Tom!'); }); $(document).ready(function() { alert('Hello Jeff!'); }); $(document).ready(function() { alert('Hello Dexter!'); }); 

你会发现它相当于这个,注意执行顺序:

 $(document).ready(function() { alert('Hello Tom!'); alert('Hello Jeff!'); alert('Hello Dexter!'); }); 

值得注意的是,在$(document).ready块中定义的函数不能从另一个$(document).ready块中调用,我只是运行了这个testing:

 $(document).ready(function() { alert('hello1'); function saySomething() { alert('something'); } saySomething(); }); $(document).ready(function() { alert('hello2'); saySomething(); }); 

输出是:

 hello1 something hello2 

你可以使用多个。 但是你也可以在一个document.ready中使用多个函数:

 $(document).ready(function() { // Jquery $('.hide').hide(); $('.test').each(function() { $(this).fadeIn(); }); // Reqular JS function test(word) { alert(word); } test('hello!'); }); 

是的,你可以很容易地有多个块。 只要小心它们之间的依赖关系,因为评估顺序可能不是你所期望的。

是的 ,可以有多个$(document).ready()调用。 但是,我不认为你可以知道他们将以何种方式执行。 (资源)

是的,这是可能的,但你可以更好地使用div #mydiv并使用两者

 $(document).ready(function(){}); //and $("#mydiv").ready(function(){}); 

是的,这是完全正确的,但要避免没有理由的。 例如,我使用它来dynamic生成JavaScript文件,而不是单个页面来声明全局网站规则,但是如果您一直这样做,则会使其难以阅读。

你也不能从另一个jQuery(function(){});访问一些方法jQuery(function(){}); 打电话,这是你不想这样做的另一个原因。

用旧的window.onload虽然每次指定函数都会replace旧的。

是的你可以。

如果您有其他模块在使用它的同一个页面上,则多个文档就绪部分特别有用。 用旧的window.onload=func声明,每次你指定一个被调用的函数,它就代替旧的。

现在,所有指定的function都排队/堆栈(可以确认吗?),无论指定哪个文档就绪部分。

我认为最好的办法是把切换到命名函数(检查这个溢出更多关于该主题) 。 这样你可以从一个事件中调用它们。

像这样:

 function firstFunction() { console.log("first"); } function secondFunction() { console.log("second"); } function thirdFunction() { console.log("third"); } 

这样你可以加载他们在一个单一的准备function。

 jQuery(document).on('ready', function(){ firstFunction(); secondFunction(); thirdFunction(); 

});

这将输出到您的console.log以下:

 first second third 

这样你可以重用其他事件的function。

 jQuery(window).on('resize',function(){ secondFunction(); }); 

检查这个小提琴的工作版本

这是合法的,但有时会导致不良行为。 作为示例,我使用了MagicSuggest库,并在我的项目页面中添加了两个MagicSuggestinput,并为input的每个初始化使用了单独的文档就绪函数。 第一个input初始化工作,但不是第二个,也没有给出任何错误,第二个input没有显示出来。 所以,我总是build议使用一个文档就绪function。

您甚至可以在包含的html文件中embedded文档就绪函数。 这里是一个使用jQuery的例子:

文件:test_main.html

 <!DOCTYPE html> <html lang="en"> <head> <script src="jquery-1.10.2.min.js"></script> </head> <body> <div id="main-container"> <h1>test_main.html</h1> </div> <script> $(document).ready( function() { console.log( 'test_main.html READY' ); $("#main-container").load("test_embed.html"); } ); </script> </body> </html> 

文件:test_embed.html

 <h1>test_embed.html</h1> <script> $(document).ready( function() { console.log( 'test_embed.html READY' ); } ); </script> 

控制台输出:

 test_main.html READY test_main.html:15 test_embed.html READY (program):4 

浏览器显示:

test_embed.html