在模糊（jquery，rails）上提交具有一类的多个表单

Question

我的购物车中有多种形式的产品具有相同的类别 ('.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 %>

_cart_row.html.erb：

<%= 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。

Answer 1

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

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

请参阅this fiddle 以获得工作演示。