Question

我正在实现一个Rails audio_tag和Javascript：

<%= audio_tag current_word.sound, autoplay: true, class: "audio-play" %>
<button type="button" class="btn btn-default btn-lg", id="audioButton">
  <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>

和

jQuery(document).ready(function() {
    $("#audioButton").on("click", function() {
        $(".audio-play")[0].currentTime = 0;
        return $(".audio-play")[0].play();
    });
});

当我在网站刷新后或重新加载页面时进入页面时，这很有效。否则，如果我单击并从菜单返回，将会有一个初始自动播放，按钮将显示但单击时将无法工作。如何在此上下文中保持jQuery加载？

Answer 1

如果元素动态变化，请使用事件委派。

而不是：

$("#audioButton").on("click", function() {

使用：

$(document).on("click", "#audioButton", function() {

Answer 2

您几乎肯定会遇到TurboLinks，这会绕过您的jQuery(document).ready回调。

如果您只想关闭TurboLinks（因为虽然它的速度非常快，但确实会产生一些烦人的效果），您只需编辑app/assets/javascripts/application.js文件并删除此行：< / p>

//= require turbolinks

这将禁用应用程序中的TurboLinks，现有代码应该可以正常工作。

但是，如果要在应用程序中继续使用TurboLinks，则还需要处理页面动态更新时的特殊事件。这些事件是＆＃34; page：load＆＃34;和＆＃34; page：restore＆＃34;，并且应该以与jQuery(document).ready回调相同的方式处理。

我通常会在HTML页面<body>底部的一个小脚本中包含所有这些内容，如下所示：

<body>
  <!-- important body stuff -->
  <script>
  jQuery(document).ready(onThisPageReady);
  jQuery(document).on('page:load', onThisPageReady);
  jQuery(document).on('page:restore', onThisPageReady);
  </script>
</body>

在Javascript（或CoffeeScript）源代码中，您可以包含：

function onThisPageReady() {
    $("#audioButton").on("click", function() {
        $(".audio-play")[0].currentTime = 0;
        return $(".audio-play")[0].play();
    });
}

现在，您可以针对所有场合进行页面初始化。如果您愿意，TurboLinks会提供您可以注册的更多活动，并在此处找到完整列表：TurboLinks Events。如果您正在启动Rails 5应用程序，则TurboLinks的版本为 new ，并且具有完全不同的要注册的事件集，您可以在TurboLinks 5 Full List of Events中找到。 / p>

Answer 3

尝试直接调用它，不需要document.ready

$("#audioButton").on("click", function() {
    $(".audio-play")[0].currentTime = 0;
    return $(".audio-play")[0].play();
  });

jQuery事件处理程序在离开视图时停止工作

3 个答案: