返回頁面后，flatPickr 中的日歷消失了

Question

我正在處理 Rails 5 項目並使用 flatPickr gem 制作日歷。 日歷工作正常，讓我可以毫無問題地搜索日期。 我以為一切都很好。 但是，我注意到當我離開我的主頁時，我使用 flatPickr 並返回它，日歷不再出現。 我檢查了頁面，甚至可以看到 flatPickr CSS class 不再出現在表單上。 這就像應用程序忘記了 flatPicker。 這是我的代碼：

應用程序.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');
})

並且仍然遇到同樣的問題 - 當我離開頁面時，日歷停止出現。

Answer 1

我能夠回答我的問題，解決方案是這樣的：

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

它補充說 turbolinks:load 有幫助。