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），就像我说的那样，如果函数在一个单独的文件中，它就可以工作。那么为什么内联不呢？

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 Foundation的说法，在XHTML中使用内联javascript很麻烦：（https://developer.mozilla.org/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_/Examples#Example_1）

JavaScript通常包含CDATA部分之外的XHTML中不存在的字符。

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

的问题

为什么此代码在单独的文件上工作，但不在内联

2 个答案: