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

【问题标题】：jQuery event handlers stop working upon leaving viewjQuery 事件处理程序在离开视图时停止工作
【发布时间】：2016-06-04 00:10:05
【问题描述】：

我正在与 Javascript 一起实现 Rails audio_tag：

<%= 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 加载？

【问题讨论】：

你确定return在这里的正确用法吗？你会删除它并重新测试吗？
我尝试删除它并得到相同的结果。
如果您使用的是 chrome，请尝试使用大写字母 P！

标签： javascript jquery ruby-on-rails audio

【解决方案1】：

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

代替：

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

用途：

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

【讨论】：

哦不，我很困惑。你说得对，我的回答不对。所以我马上删！来源：api.jquery.com/on

【解决方案2】：

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

如果您只想关闭 TurboLinks（因为它速度极快，但确实有一些烦人的效果），您只需编辑您的 app/assets/javascripts/application.js 文件并删除此行：

//= require turbolinks

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

但是，如果您想在您的应用程序中继续使用 TurboLinks，您还需要处理页面动态更新时的特殊事件。事件是“page:load”和“page:restore”，应该以与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 的版本是新的，并且有一组完全不同的事件要注册，您可以在TurboLinks 5 Full List of Events 中找到。

【讨论】：

【解决方案3】：

尝试直接调用，不用document.ready

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

【讨论】：