title: Javascript is not working when form is rendered through AJAX
body: <p>I am new to AJAX and Javascript on rails.</p>
  <p>When the tab is clicked, the corresponding partial is rendered via AJAX</p>
  <p>When the form is rendered on the page without AJAX, flatpickr works perfectly.</p>
  <p><a href="https://i.stack.imgur.com/nEC9E.png" rel="nofollow noreferrer">flatpickr working</a></p>
  <p>But when I render it with AJAX (replacing the div link with the form), the flatpickr no longer works</p>
  <p><a href="https://i.stack.imgur.com/Jl7QB.png" rel="nofollow noreferrer">flatpickr not working</a></p>
  <p><strong>task#new</strong></p>
  <pre><code>&lt;div id=&quot;single_event&quot;&gt;
    &lt;%= link_to &quot;Single_event&quot;, task_new_path, remote: true %&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>task#new.js.erb</strong></p>
  <pre><code>$('#single_event a').parent().html(&quot;&lt;%= j render 'single_event_form', meeting: @meeting %&gt;&quot;)
  </code></pre>
  <p><strong>single_event_form.html.erb</strong></p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;%= form_with(model: meeting, local: true, :html =&gt; {:id =&gt; &quot;flatpickr-form-single&quot;} ) do |form| %&gt;
      &lt;div class=&quot;mb-6&quot;&gt;
        &lt;%= form.label :body %&gt;
        &lt;%= form.rich_text_area :body, class: 'form-control' %&gt;
      &lt;/div&gt;
      &lt;div class=&quot;mb-6&quot; style =&quot;width: 30vw;&quot;&gt;
        &lt;%= form.label :start_time, class: 'label' %&gt;
        &lt;div class=&quot;flex items-center justify-between max-w-md&quot;&gt;
          &lt;%= form.text_field :start_time, data: { behavior: &quot;flatpickr&quot; }, placeholder: &quot;Date and time select ...&quot;, class: &quot;form-control&quot; %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;field&quot; style =&quot;width: 30vw;&quot;&gt;
        &lt;%= form.label :end_time, class: 'label' %&gt;
        &lt;div class=&quot;flex items-center justify-between max-w-md&quot;&gt;
          &lt;%= form.text_field :end_time, data: { behavior: &quot;flatpickr&quot; }, placeholder: &quot;Date and time select ...&quot;, class: &quot;form-control required&quot; %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;%= form.submit class: &quot;btn btn-primary text-base py-1.5 px-5&quot;, value: &quot;Confirm&quot; %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>flatpickt.js</strong></p>
  <pre><code>import flatpickr from &quot;flatpickr&quot;
  require(&quot;flatpickr/dist/flatpickr.css&quot;)
  
  document.querySelector('#flatpickr-form-single')
      .addEventListener(&quot;ajax:success&quot;, function(data, status, xhr) {
        flatpickr(&quot;[data-behavior='flatpickr']&quot;, {
          enableTime: false,
          altInput: true,
          altFormat: &quot;F j, Y&quot;,
          minDate: &quot;today&quot;
      })
  });
  </code></pre>