javascript - Rails 部分与 Javascript 监听器在主页上工作，但在其他地方不起作用

Question

我解决了这部分:请参阅下面的所以我让它工作以了解新问题。以下是供引用和上下文的初始问题: 我在 app/javascript 文件夹中有一个 custom.js 文件。我有一些为玩家添加监听器的代码:

// Add Listeners 
  document.getElementById('file').addEventListener('change', handleFileSelect, false);
  list.addEventListener("click", function(e)
    {
      audio.src = e.target.dataset.additionalInfo;
    });

音频播放器呈现为部分。 当用户单击列表项时，音频源的目标由监听器设置。列表项代码(包含在部分中)是:<li data-additional-info= <%=track_url%>><%= sanitize_filename(track.key) %></li>

在主页上渲染部分的一切都工作得很好，但是当我尝试在不同的页面(除了主页之外)上渲染部分时，除了监听器之外，一切都正常，所以我得到了列表项，因为我应该，但它们不可点击来将选定的文件加载到播放器中。

我的application.html.rb具有以下加载javascript的代码

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

所以我让它工作..有点。这是我的愚蠢错误。我正在使用此建议 post:

我回到帖子并按照说明进行操作。我将事件监听器从上面更改为以下内容:

var list = document.querySelector('.js-interactive-list');

  list.addEventListener("click", function(e)
    {
      audio.src = e.target.dataset.additionalInfo;
    });

对细节不够重视是一个 killer ......但现在如果我在一个页面上播放文件并导航到包含相同部分的另一个页面，我必须使用浏览器刷新以使其在新页面上播放。

Answer 1

我假设您正在使用 Rails Turbolinks因为它是默认功能，并且我在您的脚本包含标记中看到“data-turbolinks-track”。

这是 Turbolink 工作原理的简化版本:

1. 您点击了一个链接
2. Rails 会阻止浏览器加载下一页的默认行为，但 Rails javascript 将通过 javascript ajax 获取该新页面。
3. Rails 会替换作为中心“ View ”的 DOM 元素，并将 html 替换为刚刚从 ajax 请求中获取的 html。
4. 您的 View 中现在有全新的(非水合)html，但您的布局和 JavaScript 环境保持不变。

这是您的应用程序中发生的情况:

1. 您的页面已加载
2. JavaScript 在页面中查询 '.js-interactive-list' 元素并找到一个
3. 您的 JavaScript 将事件监听器应用于该 DOM 元素
4. 您点击下一页的链接，turbolinks 会获取 html 并用全新的 html 替换 View 中的所有元素 - 不添加监听器

您添加的事件监听器仅添加到刚刚丢弃或缓存的 Rails Turbolinks 元素中。加载并替换您的 View 的全新 html Rails Turbolinks 没有添加任何事件监听器。

因此，您可以监听 page:load 事件，该事件在 Rails Turbolinks 替换 View 时触发，并重新应用这些事件监听器 like this example

或者，您可以将事件监听器应用于 DOM 树中较高位置的元素 - 该元素不会在 View 中被替换。 一个例子是(在 jQuery 中):

$(document).on('click', '.js-interactive-list', function(e) {
     audio.src = e.target.dataset.additionalInfo;
});

这有意义吗？