title: Rails turbolinks break submit remote form
body: <p>I'm having a rather weird problem using Rails 4, Turbolinks and a remote form. I have a form looking like:</p>
  
  <pre><code>&lt;%= form_for [object], remote: true do |f| %&gt;                                                   
      &lt;td&gt;&lt;%= f.text_field :name, class: 'form-control' %&gt;&lt;/td&gt;                                     
      &lt;td&gt;&lt;%= f.email_field :email, class: 'form-control' %&gt;&lt;/td&gt;                                   
      &lt;td&gt;&lt;%= f.submit button_name, class: 'btn btn-sm btn-primary' %&gt;&lt;/td&gt;
  &lt;% end %&gt;    
  </code></pre>
  
  <p>This form adds (creates) a new object. It does however not always work:</p>
  
  <ul>
  <li>When I load the page directly using the URL or a refresh; it works</li>
  <li>When I navigate from my app to this page; it fails</li>
  </ul>
  
  <p>When disabling Turbolinks for this link, the page worked perfectly.</p>
  
  <p>I have two questions:</p>
  
  <ol>
  <li>Why doesn't this work? Is this because the remote handlers aren't attached to the button because of a JQuery/Turbolinks problem?</li>
  <li>How can I work around this problem?</li>
  </ol>
  
  <p>Thanks in advance.</p>
  
  <p><strong>Solution</strong></p>
  
  <p>Thanks to @rich-peck, the solution was to add a piece of javascript that manually submits the form upon clicking the button:</p>
  
  <pre><code>&lt;%= javascript_tag do %&gt;
    var id = "#&lt;%= dom_id(f.object) %&gt;";
    var inputs = $(id).parent().find('input');
    console.log(inputs);
    $(id).parent().find('button').on('click', function(e) {
      e.preventDefault();
      $(id).append(inputs.clone());
      $(id).submit();
    });
  &lt;% end %&gt;
  </code></pre>
  
  <p>This code adds javascript to the form table row, getting the inputs, appending them to the ID and submitting the form. The preventDefault(); prevents the query from getting sent twice when the page is refreshed and the form actually works.</p>