document.ready 被多次调用答案

【问题标题】：document.ready is getting called multiple timesdocument.ready 被多次调用
【发布时间】：2009-11-04 22:36:13
【问题描述】：

在我的 php 应用程序中，我有多个模板组合成一个页面。所以在关于我们的页面上说你的模板应该是这样的

<?php
    $this->render("header.php");
?>

my about us page

<?php
  $this->render("footer.php");
?>

这只是执行 include() 的一种奇特方式。但是，header.php 有一些通过 jquery 框架在 document.ready 上运行的 javascript，需要 header 的页面也是如此。所以你有这样的东西

<?php
    $this->render("header.php"); // has its own $(document).ready
?>
<script type="text/javascript">
     $(document).ready(function(){
          console.log("test");
     });
 </script>
my about us page

<?php
  $this->render("footer.php");
?>

我遇到的错误是 document.ready 为页面上的每个 document.ready 调用一次。在上述情况下，控制台显示

测试

如果我注释掉 header.php 的呈现，document.ready 会像我想要的那样被调用一次。

除了使用信号量之外，还有更好的方法来防止这种情况吗？我尝试缓冲输出，但这似乎不起作用。

编辑：为每个请求添加最终输出

<script type="text/javascript">
     $(document).ready(function(){
          // do some javascript like highlighting 
          // form elements with specific classes
     });
</script>
  display header here 

<script type="text/javascript">
     $(document).ready(function(){
          console.log("test");
     });
 </script>
my about us page

display footer

【问题讨论】：

这个的 HTML 输出是什么？ PHP 几乎可以肯定是无关紧要的？
如果您想更改 php 或 javascript 中的某些内容，我不是您的问题。
如果你把它放在头文件和正文中，它会被调用两次不是吗？

标签： php jquery

【解决方案1】：

我刚刚尝试在本地运行您的最终输出，但正如预期的那样，控制台中只显示了一条“测试”消息。

您是否包含任何其他 JS 库？ JS中可能有一些您已经编辑出来的代码导致了这种情况。

【讨论】：

在其中一个插件中，作者做了一个 $(elm).wrapInner('
');这会将任何脚本标签也包含在 div 中。因此页面会加载，所有的 document.ready-s 都会运行，而这又会运行这个插件。现在这个插件重建了 dom 的一小部分（通过 wrapInner），这触发了该重建部分中 javascript 的第二次运行。在重写了他们如何做 wrapInner 之后，一切都修复了。

【解决方案2】：

我整理了这段演示代码，但无法重现该问题...希望它可以帮助您...

<html>
<head>
  <title>test</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
     $(document).ready(function(){
          // do some javascript like highlighting 
          // form elements with specific classes
      $('.some-element').css('background', '#eec');
     });
</script>

display header here 

<script type="text/javascript">
     $(document).ready(function() {
          $('body').append("<p>test</p>");
     });
 </script>

<p class='some-element'>
my about us page
display footer
</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</body>
</html>

【讨论】：