在 jsFiddle 中工作但在浏览器中不工作的代码答案

【问题标题】：Code working in jsFiddle but not in browser在 jsFiddle 中工作但在浏览器中不工作的代码
【发布时间】：2011-06-05 23:46:00
【问题描述】：

我正在尝试运行以下代码，写在我的本地机器上：

http://www.jsfiddle.net/WShdx/3/

在功能方面（忽略前一个和下一个按钮中损坏的图像，以及大小错误的主图像），单击/悬停功能在 jsfiddle 中正常工作。但是，在我的本地机器上它根本不工作。

对于所有意图和目的，代码都是相同的，除了本地副本具有此头部部分以加载到包含在 jsfiddle 页面中的 javascript/css 文件中：

<head>
  <title>Jquery Wizard</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script src="wizard.js" type="text/javascript" ></script>
</head>

jsFiddle 有什么奇妙的功能可以让我的代码神奇地工作，还是我在这里遗漏了什么？

【问题讨论】：

你是什么意思它根本不起作用？您的调试器报告了什么样的错误？
给我们一些东西，错误或任何东西，在这一点上没有办法告诉它为什么不起作用。你的外部js在同一个文件夹中吗？您是否必须使用 https，请尝试使用 http for jquery cdn。尝试通过验证器运行它。
这似乎是一个安全问题；在线代码在不同的浏览器中与本地代码具有不同的权限，特别是在来自不同域的访问方面。
抱歉各位没有看到这些cmets。如上所述，问题是单击/悬停 jquery 函数在不在 jsfiddle 中时不起作用。我在这里上传了文件：harrisonfjord.com/wizard/index.html。 Dr.Molle 似乎是对的，它可能与 jsFiddle 中的 onLoad 有关，但我不是 100% 确定。 EDIT2：是的，莫勒博士是对的，见下文。谢谢大家的帮助！

标签： jquery jsfiddle

【解决方案1】：

您选择在 jsFiddle 上运行脚本代码“onload”，这就是区别。

没有 onload 它不会找到 $('area') ，因为你的脚本被放在了 <head> 里面，而 <body> 里面的元素仍然是未知的。

【讨论】：

感谢您的回复！得到它的工作，感谢它。我通过添加“$(window).load(function(){}”让它工作。如果其他人有同样的问题，这个函数会等到页面的其余部分在运行之前加载。如Molle 博士说，我的脚本没有工作，因为它在页面加载之前运行，并且正在寻找尚未创建的元素。
也可以简单地将 thze 脚本放在正文的末尾。好处：所有元素在那里都是已知的，并且！脚本稍后加载，因此页面本身可能会显示得更快。
记住，你可以随时加载草稿（ctrl+shift+Enter）并查看jsFiddle生成的源代码

【解决方案2】：

我还建议遇到此类错误的任何人在发生此类问题时使用 firebug 或任何调试工具调试脚本。可能是非常简单但令人沮丧的问题，例如 Uncaught SyntaxError: Unexpected token ILLEGAL 错误。调试器非常方便！

【讨论】：