将JavaScript代码放在单独的文件中不起作用

Question

我正在使用Optimizely guiders.js示例代码：

虽然如果我提取JavaScript代码并将其放置在单独的文件中，则向导不会加载。

这是经过编辑的HTML：

<html>
  <head>

    <!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="guider.js"></script>
    <script type="text/javascript" src="guidedTour.js"></script>

    <link rel="stylesheet" href="guider.css" type="text/css" />
  </head>
  <body>
    <span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
      <br />
      <img src="clock.gif" width=150 height=150 />
    </span>


  </body>
</html>

我在同一个目录下的guidedTour.js包含了所有JavaScript代码。 所有.js文件也位于同一目录中。 并且代码在将其提取到单独的文件中之前起作用。

当JavaScript在单独的文件中时，引导程序不会加载。

我在Chrome中收到以下错误：

“未捕获的TypeError：无法读取null jquery-1.5.1.min.js：16的属性'clientHeight'”

尝试使用最新版本的jQuery会在guiders.js上引发错误。 无论如何，这似乎与我将JavaScript代码保留在index.html中的行为不同。

我为工作代码创建了一个jsfiddle： http : //jsfiddle.net/vpMQy/

我不知道如何在单独的文件中用JavaScript创建类似的jsfiddle，以便重现该问题。

是否可以将此JavaScript代码放在单独的文件中？

Answer 1

始终将代码包装在DOM ready处理程序中

$(document).ready(function() {
    //your code here
});

还是它的简写

$(function() {
    //your code here
});

或者将您的脚本放在文档body ：

    //...
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="myScript.js"></script>
 </body>

而且在准备好DOM之前，您将不会遇到任何问题。 =]

将JavaScript代码放在单独的文件中不起作用

问题描述

1 个解决方案

解决方案1
11 已采纳 2012-08-14 11:55:13

将JavaScript代码放在单独的文件中不起作用

问题描述

1 个解决方案

解决方案1 11 已采纳 2012-08-14 11:55:13

解决方案1
11 已采纳 2012-08-14 11:55:13