为什么此代码适用于单独的文件但不能内联

Question

这个问题可能看起来很傻，但我真的找不到问题所在。最初我有一个 .js 文件，只有这个功能可以向页面添加音频：

function addAudio(id_name, audio_filepath) {
  var audio = $('<audio />')
                .prop('id', 'audio' + id_name)
                .prop('src', audio_filepath)
                .text("Your reader doesn't support audio.");

  $('body').append(audio);

  $('#' + id_name).click(function () {
    audio.get(0).play();
  });
}

它在 html 中被这样调用：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
  <!-- some content here -->
  <button id="test">Play</button>

  <!-- reference to lib containing jquery -->
  <script type="text/javascript" src="js/lib.min.js"></script>

  <!-- script where the function addAudio resides -->
  <script type="text/javascript" src="js/add-audio.js"></script>

  <script type="text/javascript">
    $().ready(function() {
      addAudio('test', 'audio/01-test.wav');
    });
  </script>
</body>
</html>

这很好用。问题是当我尝试将函数移出文件并将其内嵌在脚本标记中时。在这种情况下，当我单击按钮时，控制台会打印 Uncaught TypeError: Cannot read property 'play' of undefined.

这是修改后的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
  <!-- some content here -->
  <button id="test">Play</button>

  <!-- reference to lib containing jquery -->
  <script type="text/javascript" src="js/lib.min.js"></script>

  <script type="text/javascript">
    function addAudio(id_name, audio_filepath) {
      var audio = $('<audio />')
                    .prop('id', 'audio' + id_name)
                    .prop('src', audio_filepath)
                    .text("Your reader doesn't support audio.");

      $('body').append(audio);

      $('#' + id_name).click(function () {
        audio.get(0).play();
      });
    }

    $().ready(function() {
      addAudio('test', 'audio/01-test.wav');
    });
  </script>
</body>
</html>

试图隔离错误，我发现当函数在 .js 文件中时，变量 audio 是一个 jquery 对象 [audio#audiotest]，但是当函数是内联的，该变量是对象 n.fn.init {}.

为什么会这样？

编辑

我注意到会发生这种情况，因为它位于 xhtml 文件中（我正在制作 epub3 格式的电子书）。如果我将文件更改为 html，它会再次运行。但这很奇怪，因为 xhtml 支持音频标签（您可以在此处查看规范：http://www.idpf.org/accessibility/guidelines/content/xhtml/audio.php），而且就像我说的，如果函数在单独的文件中，它就可以工作。那为什么 inline 不呢？

Answer 1

我认为问题出在您的文件引用上。当我将您的代码放入 jsfiddle 时，它似乎可以引用互联网上的 wav 文件。

https://jsfiddle.net/ur64L8uh/

    function addAudio(id_name, audio_filepath) {
      var audio = $('<audio />')
                    .prop('id', 'audio' + id_name)
                    .prop('src', audio_filepath)
                    .text("Your reader doesn't support audio.");

      $('body').append(audio);

      $('#' + id_name).click(function () {
        audio.get(0).play();
      });
    }

    $().ready(function() {
      addAudio('test', 'http://download.wavetlan.com/SVV/Media/HTTP/WAV/Media-Convert/Media-Convert_test1_Alaw_Mono_VBR_8SS_16000Hz.wav');
    });
}

Answer 2

我找到了答案，各位。感谢大家的关注和帮助，给您带来的不便敬请谅解。我正考虑删除这个问题，但我会回答它以帮助那些可能会遇到同样问题的人。

根据 Mozilla 基金会的说法，在 XHTML 中使用内联 javascript 很麻烦：(https://developer.mozilla.org/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_/Examples#Example_1)

JavaScript typically contains characters which can not exist in XHTML outside of CDATA Sections.

所以我解决了将行 $('<audio />') 更改为 $('&t;audio /gt;')

的问题

为什么此代码适用于单独的文件但不能内联

Why does this code work on a separate file but not inline

javascript

jquery

audio

epub3