通过 AJAX 呈现表单时，Javascript 不起作用

Question

我是 AJAX 和 Javascript on rails 的新手。

当点击tab时，通过AJAX渲染对应的partial

当表单在没有 AJAX 的页面上呈现时，flatpickr 可以完美运行。

flatpickr working

但是当我使用 AJAX 渲染它时（用表单替换 div 链接），flatpickr 不再工作

flatpickr not working

task#new

<div id="single_event">
  <%= link_to "Single_event", task_new_path, remote: true %>
</div>

task#new.js.erb

$('#single_event a').parent().html("<%= j render 'single_event_form', meeting: @meeting %>")

single_event_form.html.erb

<div class="container">
  <%= form_with(model: meeting, local: true, :html => {:id => "flatpickr-form-single"} ) do |form| %>
    <div class="mb-6">
      <%= form.label :body %>
      <%= form.rich_text_area :body, class: 'form-control' %>
    </div>
    <div class="mb-6" style ="width: 30vw;">
      <%= form.label :start_time, class: 'label' %>
      <div class="flex items-center justify-between max-w-md">
        <%= form.text_field :start_time, data: { behavior: "flatpickr" }, placeholder: "Date and time select ...", class: "form-control" %>
      </div>
    </div>
    <div class="field" style ="width: 30vw;">
      <%= form.label :end_time, class: 'label' %>
      <div class="flex items-center justify-between max-w-md">
        <%= form.text_field :end_time, data: { behavior: "flatpickr" }, placeholder: "Date and time select ...", class: "form-control required" %>
      </div>
    </div>
    <%= form.submit class: "btn btn-primary text-base py-1.5 px-5", value: "Confirm" %>
  <% end %>
</div>

flatpickt.js

import flatpickr from "flatpickr"
require("flatpickr/dist/flatpickr.css")

document.querySelector('#flatpickr-form-single')
    .addEventListener("ajax:success", function(data, status, xhr) {
      flatpickr("[data-behavior='flatpickr']", {
        enableTime: false,
        altInput: true,
        altFormat: "F j, Y",
        minDate: "today"
    })
});

Answer 1

您遇到的问题是由于初始化flatpickr仅在页面加载事件中，您还需要在 AJAX 请求完成后对其进行初始化。

尝试使用以下内容将其添加到您的flatpickt.js，并在 querySelector 选择器中替换为您的表单 ID：

...
document.addEventListener('turbolinks:load', function() {
  document.querySelector('#single_event a')
    .addEventListener("ajax:success", function(data, status, xhr) {
      flatpickr("[data-behavior='flatpickr']", {
        enableTime: false,
        altInput: true,
        altFormat: "F j, Y",
        minDate: "today"
    })
  });
});