Javascript 在blur（jquery、rails）上使用一个类提交多个表单

我的购物车中有同一类（“.edit_order_item”）的多种形式的产品。我需要做的是在我将焦点放在表单字段（“.cart quantity”）之外时提交表单。此代码只工作一次（对于第一个字段），在第一次点火后无效：

$('.cart-quantity').blur(function(){
    $(this).closest('form').submit();
}); 

我正在使用AJAX和Rails：

cart.html.erb：

<% @order_items.each do |order_item| %>
    <%= render 'carts/cart_row', product: order_item.product, order_item: order_item %>
<% end %>

<%= form_for order_item, remote: true do |f| %>
    <%= f.number_field :color_quantity, value: order_item.color_quantity.to_i, min: 0, class: "form-control cart-quantity" %>
<% end %>

_cart_row.html.erb：

<% @order_items.each do |order_item| %>
    <%= render 'carts/cart_row', product: order_item.product, order_item: order_item %>
<% end %>

<%= form_for order_item, remote: true do |f| %>
    <%= f.number_field :color_quantity, value: order_item.color_quantity.to_i, min: 0, class: "form-control cart-quantity" %>
<% end %>

帮助程序生成的HTML代码：

<form class="edit_order_item" id="edit_order_item_192" action="/order_items/192" accept-charset="UTF-8" data-remote="true" method="post">
    <input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" />
    <input value="0" class="form-control cart-quantity" type="number" name="order_item[color_quantity]" id="order_item_color_quantity" />       
</form>

(x times)

（十次）

我做错了什么？可能的解决办法是什么？多谢各位

UPD

---

我刚刚注意到表单助手生成了多个具有相同id的对象。这可能是问题所在吗？不过我不是指id。

这很可能与有多个元素具有相同的id有关。我还建议以稍微不同的方式编写jQuery

$('.edit_order_item').on('blur', '.cart-quantity', function() {
    $(this).closest('form').submit();
});

---

请参阅以获得一个有效的演示。

这很可能与有多个元素具有相同的ID有关。我还建议以稍微不同的方式编写jQuery

$('.edit_order_item').on('blur', '.cart-quantity', function() {
    $(this).closest('form').submit();
});

---

请参阅以获取有效演示。

谢谢您的回答。由于某些原因，此代码和原始代码即使在页面上使用单个id元素也不起作用。我找到了另一种解决方案：我可以不提交focus out，而是提交enter，rails非常聪明，可以开箱即用。你必须有一个提交按钮，但是你可以用css隐藏它。谢谢你的回答。由于某些原因，此代码和原始代码即使在页面上使用单个id元素也不起作用。我找到了另一种解决方案：我可以不提交focus out，而是提交enter，rails非常聪明，可以开箱即用。你必须有一个提交按钮，但你可以用css隐藏它。