jQuery可在jsFiddle上使用，但不能在实时页面上使用

Question

问题

有趣的是，可能有一个简单的解决方案。 在@jessegavin的帮助下，我向页面添加了一个jQuery函数，用于控制页面上HTML5音频元素的播放。 代码很漂亮，可以在jsFiddle上正常工作，但是放在我页面的上下文中却不能。

我花了很多时间，有条不紊地逐步解决这个问题，以试图找出我的错误，但无济于事。 真的，我在这方面使用了亚里士多德，并运用了科学方法。 请原谅我这个问题。 这真的是我的不得已。

坚韧不拔

这是我的发现：该页面的所有JavaScript函数都可以在jsFiddle的上下文中正常工作。 一次专门添加了一个功能之后，我可以说它们每个都正常工作，并且除了HTML5音频回放之外，所有功能都可以在jsFiddle和实时页面上运行。 也就是说，只有HTML5音频播放无法在实时页面上运行。

所有HTML都经过100％验证，所有CSS都经过100％验证。 两组代码都完整地添加到jsFiddle中。

页面标题通过Google的onload命令（外部JavaScript文档）（按此顺序）通过Google的onload命令加载外部CSS文档，jQuery 1.5.1和jQuery UI 1.8.8（与jsFiddle相同，但UI为1.8.9）。该网站包含所有功能），最后是Google Analytics（分析）功能。

JavaScript包装在文档就绪框架中。

我的猜测是差异出在脑海中某处，但我无法想象到底是什么。 所有外部链接均正常运行，这由JavaScript函数正常运行证明（新的音频控制器除外）。

后脚本

到目前为止，PS-仅在Chrome和Safari中有效。.我正在托管两个音频文件的服务器没有正确的ht-access文件，将OGG声明为正确的MIME类型。 我也会对此提出一个问题。

资源

jsFiddle： http : //jsfiddle.net/66FwR/3/

HTML （仅标题，主体位于jsFiddle中）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="description" content="Fernando Garibay- Producer, Songwriter, Artist, Multi-Instrumentalist, and Programmer" />
<meta name="keywords" content="Fernando Garibay, Music, Producer, Songwriter, Artist, Mutli-Instrumentalist, Programmer." />
<title>Fernando Garibay - Music</title>
<link rel="icon" type="image/png" href="http://www.fernandogaribay.com/favicon.ico" />
<link href="../styles/fernando.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAqfg-jHFfaMB9PWES0K_8ChTCwkclEZER8BG2IP57SKkFV1O9hxSZkzKYPDs-3mbhEluKXjbKUAB7sQ"></script>
<script type="text/javascript">
  google.load("jquery", "1.5.1");
  google.load("jqueryui", "1.8.8");
</script>
<script type="text/javascript" src="../scripts/fernando.js"></script>
<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXXX-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--Copyright 2011, Fernando Garibay, Inc-->
<!--Developed by Minimal +-->
</head>
<body onload="message()">

JavaScript （该功能可在jsFiddle上使用，但不能在实时页面中使用）

 $(function() {
     $(".playback").click(function(e) {
       e.preventDefault();
       var song = $(this).next('audio').get(0);
         if (song.paused)
         song.play();
       else
         song.pause();
     });
 });

Answer 1

我在实时页面上（在Chrome和Firefox中）看到两个JavaScript错误：

Uncaught TypeError: Object [object Object] has no method 'fancybox'

Uncaught ReferenceError: message is not defined

您可以在fernando.js中引用fancybox（），并在<body onload="message()">引用<body onload="message()"> 。 这些错误很可能会阻止您的音频控制代码运行。

Answer 2

URL是http://fiddle.jshell.net/66FwR/3/show/看一下。 它还包括jQuery UI。 您可以复制源并使用它。

jQuery可在jsFiddle上使用，但不能在实时页面上使用

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-04-19 09:44:21

解决方案2
0 2011-06-11 16:32:19

jQuery可在jsFiddle上使用，但不能在实时页面上使用

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-04-19 09:44:21

解决方案2 0 2011-06-11 16:32:19

解决方案1
1 已采纳 2011-04-19 09:44:21

解决方案2
0 2011-06-11 16:32:19