返回页面后，flatPickr中的日历消失

问题描述

我正在研究Rails 5项目，并使用flatPickr gem制作日历。日历工作正常，可以让我在没有问题的日期进行搜索。我以为一切都很好。但是，我注意到当我离开主页时，在这里我使用flatPickr并返回到它，日历不再出现。我检查了页面，甚至可以看到flatPickr CSS类不再在表单上。就像该应用程序只是忘记了flatPicker。这是我的代码：

application.js：

//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap
//= require_tree .
//= require flatpickr


document.addEventListener('DOMContentLoaded',function() {
  flatpickr('#datePicker',{
    enableTime: false,dateFormat: "Y-m-d",});
})

document.addEventListener('DOMContentLoaded',function() {
  flatpickr('#datePicker2');
})

home.html.erb：

  <%= form_with(url: "/report",method: "get",remote: true) do |f| %>

      <%= f.label(:first_date,"First Date:") %>
      <%= f.text_field(:first_date,id: 'datePicker')  %>

      <%= f.label(:last_date,"Last Date:") %>
      <%= f.text_field(:last_date,id: 'datePicker2')  %>

      
      <br>
      <p>Enter Report Type:</p>
      <%= select_tag :reportType,options_for_select([['po','po'],['invoice','invoice'],['sale','sale'],['received','received']]) %>
      <br>

      <%= submit_tag("Show Report") %>

  <% end %>

我不确定，但想知道我的问题是否与使用DOMContentLoaded有关。就像我说的那样，当我最初登陆/刷新主页时，效果很好。一旦我离开主页并返回，它将无法正常工作。谢谢您的帮助。

更新：我尝试在rails中使用datePicker gem并得到相同的确切问题。我也将我的jquery调用修改为以下内容：

$(document).ready(function(){
  $("#datePicker").focus(function(){
    flatpickr('#datePicker');
  });
});

window.addEventListener("pageshow",function() {
  flatpickr('#datePicker2');
})

仍然遇到相同的问题-当我离开某个页面时，日历停止显示。

解决方法

我能够回答我的问题，而解决方案是：

window.addEventListener("turbolinks:load",function() {
  flatpickr('#datePicker2');
})

它添加了turbolinks：load帮助。