title: Rails: cannot submit a remote form that was loaded via Ajax
body: <h2>Goal</h2>
  
  <p>I have a page with a list of items, coming from a Rails backend. I want to be able to edit a row in that list, using Ajax calls via Rails UJS.</p>
  
  <h2>Approach</h2>
  
  <p>I've added an edit button to the end of each row. The edit button is a 
  <code>link_to ... :remote =&gt; true</code>. Clicking it loads the list again, but with the selected
  row in edit mode. The editable row is embedded in a <code>form ... :remote =&gt; true</code>.
  The save button in that row is a <code>submit</code> button.</p>
  
  <p><strong>index.html.haml</strong></p>
  
  <pre><code>#editor
    %table
      - @items.each do |item|
        %tr
          = render :partial =&gt; 'row', :locals =&gt; { :item =&gt; item }
  </code></pre>
  
  <p><strong>_row.html.haml</strong></p>
  
  <pre><code>... 
  %td // a number of columns with attributes
  ...
  %td
    = link_to t("actions.edit"), edit_item_path(item), :remote =&gt; true
    = link_to t("actions.delete"), item_path(item), :remote =&gt; true, :method =&gt; :delete, :data =&gt; { :confirm =&gt; "Are you sure?" }
  </code></pre>
  
  <p><strong>edit.html.haml</strong></p>
  
  <pre><code>#editor
    %table
      - @items.each do |item|
        %tr
          - if item == @item
            = form_for @item, :url =&gt; item_path(@item), :remote =&gt; true, do |f|
              = render :partial =&gt; "row_form", :locals =&gt; { :f =&gt; f }
          - else
            = render :partial =&gt; 'row', :locals =&gt; { :item =&gt; item }
  </code></pre>
  
  <p><strong>_row_form.html.haml</strong></p>
  
  <pre><code>... 
  %td // a number of columns with editable attributes
  ...
  %td
    %button{ :type =&gt; "submit" }=t("actions.save")
    = link_to t("actions.cancel"), items_path, :remote =&gt; true
  </code></pre>
  
  <p><strong>Ajax response handling</strong></p>
  
  <pre><code>$("#editor").on("ajax:success", function(event, data, status, xhr) {
    $("#editor").html($(data).find("#editor").html());
  });
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>When I load a list page in edit mode <code>/items/12/edit</code>, the row of item 12 is 
  editable. Clicking the save button submits the form via Ajax correctly and loads
  the <code>/items</code> index partial, replacing the editable list with jQuery. Clicking 
  the edit button again, loads the edit page again (e.g. <code>/items/12/edit</code>), with 
  the embedded form. Only this time, the form does not get submitted anymore when 
  the save button is clicked. It seems the submit event handler is not attached to the 
  dynamically loaded remote form.</p>
  
  <h2>Question</h2>
  
  <p>How can I submit a remote form loaded via Ajax, preferrably using the Rails UJS approach?</p>
  
  <h2>Duplicates</h2>
  
  <p>I know there are duplicates of this question, but none of them were answered. I hope someone finally comes up with a definite answer. </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/7548852/rails-remote-form-loaded-via-ajax-after-document-ready-is-not-submitting">Rails remote form loaded via Ajax after document ready is not submitting</a></li>
  <li><a href="https://stackoverflow.com/questions/13272778/remote-true-data-remote-on-a-form-loaded-via-ajax">:remote => true/data-remote on a form loaded via ajax</a></li>
  </ul>