javascript - jQuery 事件处理程序在离开 View 时停止工作

Question

我正在使用 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 加载？

Answer 1

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

代替:

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

使用:

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