jquery – HTML页面中的多个$(document).ready()的副作用(如果有)是什么?

我正在使用跟随MVC模式的Web应用程序框架(Symfony 1.3.6).

视图层由模板装饰器组成.模板文件也可能包含其他模板 – 这是什么引起了我的问题.

假设有一个页面(让它称之为“首页”),它由几个模板组成 – (代码已被重构,因此“子模板”可以在其他页面上使用.

作为重构的结果,主模板使用的小模板(我们的示例中的“主页”)需要包含其与jQuery相关的代码.

让我们说首页模板使用2个子模板:

>模板A
>模板B

假设模板A由以下代码片段组成:

<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field1').click(function(){
      alert('Field 1 clicked!');
   });
</div>
</script>

假设模板B由以下代码片段组成:

<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field2').click(function(){
      alert('Field 2 clicked!');
   });
</div>
</script>

现在模板的“主页”如下所示:

<html>
  <head>
    <title>Multiple jQuery snippet test</title>
    <script src="path_to_jquery"></script>
 </head>
 <body>
   <div>include_template('template A')</div>
   <div>include_template('template B')</div>
 </body>
</html>

我已经尝试了这一点 – 而且我的惊奇之处在于,合并后的最终页面(“主页”)中只有一个$(文档).ready().

我不知道我的浏览器(Firefox)或网络框架(Symfony)是否在幕后做了一些“清理”.

所以我的问题是,如果要将jQuery功能重构为“可重复使用的模板”,可以重复使用以在不同的页面中提供相同的功能,那么最好的方法是什么?

BTW,我希望没有人建议编写一个jQuery插件,因为这不是我在说的.

解决方法

多个$(document).ready()调用没有问题,只有几个注意事项:

>可读性降低.
>范围:在一个$(document).ready()中声明的一个函数/变量/对象在其他任何一个都不会显示.看这个简单的demo.

另请参阅上一个关于SO的问题:

> Can you have multiple $(document).ready(function(){ … }); sections?

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...