Javascript 如何使用Rails 5+保持通过TurboLink提交的页面状态；jQuery

我试图在单击另一个元素时显示/隐藏

部分。非常简单的东西，而且我做得很好。问题是：这是一个待办事项列表；任务是通过Ajax（使用TurboLink、data remote等）创建和检查的，发生这种情况时，显示/隐藏操作将停止工作，直到我再次手动重新加载页面。即使我使用localStorage，它也无法跟踪节是否隐藏的状态，例如：

$(document).ready(function(){
    if (localStorage.getItem("revealed?") === "true") {
      $('#completed').removeClass('hide');
    } else {
      $('#completed').addClass('hide');
    }

    $('#show_completed').click(function(){
      if (localStorage.getItem("revealed?") === "false") {
        $('#completed').removeClass('hide');
        localStorage.setItem("revealed?", "true");
      } else {
        $('#completed').addClass('hide');
        localStorage.setItem("revealed?", "false");
      }
    });

});

我在JS方面尝试了我能想到的每一个解决方案，在某种程度上，所有的解决方案都是有效的，但当任务自动提交时，它们仍然会失效

我被难住了。是jQuery和TurboLink之间的某种幕后干扰吗？我错过了什么
 可能有一个解决方案，就是在jquery中使用
on（）
，您可以通过以下更改来实现，如果没有，让我们尝试另一种方法

$(document).ready(function(){
    toggleItem();

$('#show_completed').on('click', function(){
  if (localStorage.getItem("revealed?") === "false") {
    $('#completed').removeClass('hide');
    localStorage.setItem("revealed?", "true");
    toggleItem() 
  } else {
    $('#completed').addClass('hide');
    localStorage.setItem("revealed?", "false");
    toggleItem();
  }
});


});

toggleItem = function(){
if (localStorage.getItem("revealed?") && localStorage.getItem("revealed?") === "true") {
      $('#completed').removeClass('hide');
    } else {
      $('#completed').addClass('hide');
    }
}

对于远程ajax调用，您将返回什么样的响应？您能否提供一个响应控制器操作的示例？