jQuery 可在 jsFiddle 上运行，但不能在实时页面中运行
问题
很有趣，可能有一个简单的解决方案。在 @jessegavin 的帮助下，我在页面中添加了一个 jQuery 函数，用于控制页面上 HTML5 音频元素的播放。该代码很漂亮并且在 jsFiddle 上可以正常工作，但在放入我的页面上下文中时却无法正常工作。
我把时间抛在了脑后，有条不紊地逐步解决这个问题，试图找出我的错误，但没有成功。真的，我在这方面遵循了亚里士多德的观点，并应用了科学方法。请原谅我这个问题的重要性。这确实是我最后的手段。
细节
以下是我的发现：页面的所有 JavaScript 函数在 jsFiddle 的上下文中都能正常工作。在一次专门添加一个功能之后，我可以说它们都可以正常工作，并且除了 HTML5 音频播放之外，所有功能都可以在 jsFiddle 和实时页面上工作。也就是说，只有 HTML5 音频播放无法在实时页面上运行。
所有 HTML 均经过 100% 验证，所有 CSS 均经过 100% 验证。两组代码都被完整添加到 jsFiddle 中。
页面标题通过 Google 的 onload 命令加载（按此顺序）外部 CSS 文档、jQuery 1.5.1 和 jQuery UI 1.8.8（在 jsFiddle 上相同，UI 为 1.8.9），外部 JavaScript 文档（其中该网站的所有功能都驻留），最后是 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();
});
});
THE QUESTION
Interesting one that probably has a simple solution. With the help of @jessegavin I've added a jQuery function to my page that controls the playback of HTML5 audio elements on the page. The code is beautiful and works correctly on a jsFiddle, but not when put into the context of my page.
I've thrown time to the wind and methodically stepped through this to try and isolate my mistake, but with no avail. Really, I went Aristotle on this one and applied the scientific method. Please forgive me for the heft of this question. It's really my last resort.
THE NITTY GRITTY
Here are my findings: All the JavaScript functions for the page work correctly in context of the jsFiddle. After specifically adding the functions one at a time I can say that they each work appropriately, and that all except for the HTML5 audio playback work on both the jsFiddle and the live page. That is to say ONLY the HTML5 audio playback is not working on the live page.
All the HTML is 100% validated, all the CSS is 100% validated. Both groups are code are added into the jsFiddle in their entirety.
The page heading loads (in this order) an external CSS document, jQuery 1.5.1 and jQuery UI 1.8.8 (same on jsFiddle, except for UI, which is 1.8.9) via Google's onload command, an external JavaScript document (where ALL functions for the site reside), and finally a Google Analytics function.
The JavaScript is wrapped in a document ready framework.
My guess is that the discrepancy lies somewhere in the head, but I cant imagine what exactly it is. All the external links work correctly, evidenced by the JavaScript functions working correctly (except for the new audio controller).
THE POST SCRIPT
P.S.- Only works in Chrome and Safari as of yet.. The server I'm hosting the two audio files off of doesn't have the correct ht-access file declaring OGG as a correct MIME type. I'll start a question for that too.
RESOURCES
jsFiddle: http://jsfiddle.net/66FwR/3/
HTML (heading only, body is in 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 (the function that works on jsFiddle, but not in a live page)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我在您的实时页面上看到两个 JavaScript 错误（在 Chrome 和 Firefox 中）：
Uncaught TypeError: Object [object Object] has no method 'fancybox'Uncaught ReferenceError: message is not Definedcode>您在 fernando.js 中引用 fancybox()，并在
中引用 message。这些错误很可能会阻止您的音频控制代码运行。I see two JavaScript errors on your live page (in both Chrome and Firefox):
Uncaught TypeError: Object [object Object] has no method 'fancybox'Uncaught ReferenceError: message is not definedYou reference fancybox() in fernando.js, and message in the
<body onload="message()">. Those errors are most likely stopping your audio control code from running.网址为 http://fiddle.jshell.net/66FwR/3/show/ 看看那个。
它还包括 jQuery UI。您可以复制源并使用它。
The URL is http://fiddle.jshell.net/66FwR/3/show/ look at that.
It includes jQuery UI too. You could copy the source and use that.