jQuery 事件处理程序在离开视图时停止工作
Posted
技术标签:
【中文标题】jQuery 事件处理程序在离开视图时停止工作【英文标题】：jQuery event handlers stop working upon leaving view 【发布时间】：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！ 【参考方案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();
);
【讨论】：
以上是关于jQuery 事件处理程序在离开视图时停止工作的主要内容，如果未能解决你的问题，请参考以下文章
频繁的GET请求停止实际处理HTTP处理程序/离开返回相同的值
IB_DESIGNABLE 使 Xcode 在离开情节提要时停止响应