Rails、TurboLink和javascript。如何避免重复开关按钮出现？

我正在Rails应用程序中实现Switchery按钮，Turbolinks处于启用状态。当我导航到另一个页面，然后单击“后退”按钮时，该按钮被复制

以下是我的Javascript代码：

$(document).on('turbolinks:load', function() {
var elem = document.querySelector('.js-switch');
var switchery = new Switchery(elem, {className:"switchery switchery-small"});
});

Html视图：

<b>Assign as administrator?<span> <%= f.check_box :admin, class:"js-switch" %></span></b>

是否指定为管理员？

截图：

那么我该如何处理这个问题呢？

通过查找data switchery=“true”，可以过滤掉已经调用的现有元素

var elem=document.querySelector（'.js开关：not（[data switchery]）；

通过查找data switchery=“true”，可以过滤掉已经调用的现有元素

var elem=document.querySelector（'.js开关：not（[data switchery]）；

防止在同一元素上调用两次switchery，但这对TurboLink没有帮助。由于页面是从缓存中提取的，所以在将其添加到DOM时，需要重新初始化其单击/更改事件。我找到的唯一方法是删除现有元素（看起来它们只是视觉元素），然后重新初始化它们。turbolinks:加载函数如下所示：

$(document).on('turbolinks:load', function(e) {
  // Delete existing switches if there are any...
  $(".switchery").remove();
  // As we removed all the switchery elements, we need fetch all of them again.
  var els = document.querySelectorAll(".js-switch");
  els.forEach(function(el) {
    new Switchery(el);
  })
});

防止在同一元素上调用两次switchery，但这对TurboLink没有帮助。由于页面是从缓存中提取的，所以在将其添加到DOM时，需要重新初始化其单击/更改事件。我找到的唯一方法是删除现有元素（看起来它们只是视觉元素），然后重新初始化它们。turbolinks:加载函数如下所示：

$(document).on('turbolinks:load', function(e) {
  // Delete existing switches if there are any...
  $(".switchery").remove();
  // As we removed all the switchery elements, we need fetch all of them again.
  var els = document.querySelectorAll(".js-switch");
  els.forEach(function(el) {
    new Switchery(el);
  })
});

---

您的建议确实避免了按钮重复，但是switchery按钮已锁定且无法触发。也许您应该在

turbolinks:unload

事件期间从页面中删除switchery元素不幸的是，它仍然是一样的。通过单击链接在页面之间导航时，该按钮可以正常工作。单击“上一步”按钮时，它将不显示。导航到当前页面时是否有其他方法触发按钮？您的建议确实避免了按钮重复，但是，switchery按钮已锁定且无法触发。也许您应该在

turbolinks:unload

事件期间从页面中删除switchery元素不幸的是，它仍然是一样的。通过单击链接在页面之间导航时，该按钮可以正常工作。单击“上一步”按钮时，它将不显示。导航到当前页面时，是否有其他方式触发该按钮？