Javascript 更改按钮状态的表单并不总是提交

我的页面通过jQuery将表单呈现为html。有时，当我单击“提交”或按enter键时，按钮会变为“加载”状态，但表单不会提交，服务器或“网络”选项卡上不会发生任何事情，用户必须重新加载页面才能尝试再次提交表单。因此，我从表单中删除了该按钮，并将其放置在之后，还将jQuery更改为在单击该按钮时也提交表单。这很好，但用户现在无法单击enter来提交表单，这是我的客户机的一个重要用例。有人知道原始问题或潜在修复的原因吗？谢谢

新jQuery

$("#add_order_btn").click(function(){
  $(this).button('loading');
  $("#new_order").submit(); # added as fix when button moved outside the form
});

新形式

<%= form_for(@new_order, url: add_order_url, method: "post", remote: true, class: "form-inline mb0") do |f| %>
      <%= f.text_field :order_start_date_time, class: "new-order-datetime input-medium", placeholder: "Start date & time", id:"new_order_time" %>
      <%= f.text_field :yrd, placeholder: "# of yards", class: "span2" %>
      <%= f.check_box :plus %>
      <%= f.label :plus, '<i class="fa fa-plus" id="go_plus"> </i>'.html_safe, class: "label_inline mr15" %>
      <%= f.text_area :notes, placeholder: "Private Dispatch notes", class: "span12", id: "new_text_area", rows: "1" %>
    <h4 class="mt5" id="new_order_extras">Order extras
      <%= link_to "Add", new_order_extras_url, remote: true %>
    </h4>
  <% end %>
  <%= button_tag '<i class="fa fa-list-alt"></i> New Order'.html_safe, class: "btn btn-primary btn-block btn-large mt5 mb15", id: "add_order_btn" %> # Moved out of form as fix

额外订购
#以固定方式移出表格

我以前在通过按钮单击提交表单时遇到跨浏览器问题，无法生成正确的事件。此外，如果按钮上有其他处理程序，它们有时会干扰表单相关事件。在处理表单时，我通常使用提交事件获得更好的结果

把按钮放回表单中。然后捕获form.submit事件，而不是按钮。单击事件

$("#new_order").submit( function(evt) {
    evt.preventDefault();
    var btn = $(this).find('button[type=submit]');
    // Do whatever it is you do here to indicate the loading state
    //     handle the form submission
    // Undo your button load state
});

---

你能举一个JSFIDLE的例子吗？谢谢你的帮助和分享你在类似问题上的经验！