防止 turbolinks 5 在某些 <a></a> 上加载

Prevent turbolinks 5 to load on certain <a></a>

我有以下几个例子。 像这样的 link 没有真正的 href:

<a href="#" id="add-item">
  <i class="fa fa-plus"></i>
</a>

还有一些神奇的 JS:

id = $('#watch-path-group').children().length + 1
$('#watch-path-group').append '<input style="margin-top: 4px;" id=wp_"' + id + '" name=wp_"' + id + '" type="text" class="form-control" placeholder="New path...">'

升级到 turbolinks 5 后,行为发生了变化。当我单击 link turbolinks 进入并重新加载页面时,在这种情况下,新添加的元素消失了...

我知道这可能或多或少是 turbolinks 所做的。摘自 github:

Turbolinks intercepts all clicks on links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.

但是我该如何完成我想做的事情。我应该停止使用所描述的 link 标签吗?

谢谢

查看文档,要在某些链接上禁用 turbolinks,您需要向元素或其任何祖先添加 data-turbolinks="false" 属性。

所以以下应该有效:

<a href="#" id="add-item" data-turbolinks="false">
  <i class="fa fa-plus"></i>
</a>

这当然假设您自己的点击处理程序设置正确,您的 ID 是唯一的,等等。