jQuery回调重复

Question

我仍然无法解决这个问题，如果有人能帮助我，我将非常感激。我已经成功编写了一个产品订购表格，该表格将从products_table中获取特定产品的价格。我的表单布局如下：

new.html.erb

    <h1>Add a new order for <%= @customer.name %></h1>

    <div class="row">
      <%= form_for(@order) do |f| %>
        .
        .
        .
        .
      <h3>Order Details</h3>
      <%= f.label :address_id, "Delivery Address" %>
      <%= f.collection_select :address_id, @addresses, :id, :select_address, {:prompt => "Select delivery location"}, {:class => "form-control"}   %></br>

      <%= f.label :del_date, "Delivery Date" %>
      <%= f.date_select :del_date, {:class => "form-control"}   %></br>

      <%= f.label :owner_id, "Person-In-Charge" %>
      <%= f.collection_select :owner_id, @owners, :id, :name, {:prompt => "Who ordered?"}, {:class => "form-control"}  %>

      <%= f.label :telephone %>
      <%= f.text_field :telephone, class: 'form-control' %>

      <%= f.label :remark, "Order Remark" %>
      <%= f.text_area :remark, class: 'form-control' %>

      <%= f.label :t_price, "Total Amount" %>
      <%= f.text_field :t_price, class: 'form-control' %></br>

      <h3>What items would you like to place?</h3>
        <%= f.add_nested_fields_link :single_orders, "Add Product" %>
        <%= f.nested_fields_for :single_orders do |builder| %>
          <div class = "form-inline">
            <%= builder.collection_select :product_id, @products, :id, :select_product, {:prompt => "choose product"}, {:class => "product_selection form-control"}  %>
            <%= builder.text_field :ctn_price, placeholder: "Price/carton", readonly: true, class: 'ctn_price_field form-control' %>
            <%= builder.text_field :qty, placeholder: "Quantity",id: "quantity", class: 'form-control' %>
            <%= builder.text_field :price, placeholder: "Amount", id: "amount", readonly: true, class: 'form-control' %>
            <%= builder.remove_nested_fields_link %>
          </div>
        <% end %>
      <%= f.submit "place order", class: "btn btn-primary" %>
    </div>
  <% end %>
</div>

当通过collect_select选择产品时，order.js.coffee将运行：

order.js.coffee

jQuery ->

  $(".product_selection").on "change", ->
      $.ajax
        url: "/orders/get_product_prices"
        type: "GET"
        dataType: "script"
        data:
          product_id: $('.product_selection option:selected').val()

将路由到：

resources :orders,             only: [:index, :new, :edit, :create, :update, :inactive, :active, :destroy] do
  member do
    post :create, :inactive, :active
  end
  collection do
    get 'get_product_prices', to: "orders#get_product_prices"
  end
end

运行文件get_product_prices.js.erb

/* global $ */
$('.ctn_price_field').each(function(){
  $(this).val(<%= @product.price %>)
});

我面临的问题是这些代码仅适用于表单中的第一个产品元素。因为我希望这个表单能够通过nested_field接受多个产品：single_order当我通过orders_controller.rb生成3个相同的nested_fields时：

def new
  @order = Order.new
  @customer = Customer.find(params[:id])
  @addresses = Address.where(customer_id: @customer.id)
  @owners = Owner.where(customer_id: @customer.id)
  @promotions = Promotion.where(status: "active")
  @packages = Package.all
  @products = Product.where(status: "active")
  @package_products = PackageProduct.all
  3.times do 
    @order.single_orders.build
  end
end

def get_product_prices
  @product = Product.find_by(id: params[:product_id])
end

当我检查chrome

上的元素时，这是HTML代码

<fieldset class="nested_fields nested_order_single_orders">
      <div class="form-inline">
        <select class="product_selection form-control" name="order[single_orders_attributes][0][product_id]" id="order_single_orders_attributes_0_product_id"><option value="">choose product</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Pear</option>
            <option value="5">Watermelon</option>
            <option value="6">Avocado</option>
            <option value="7">Kiwi</option></select>
        <input placeholder="Price/carton" readonly="readonly" class="ctn_price_field form-control" type="text" name="order[single_orders_attributes][0][ctn_price]" id="order_single_orders_attributes_0_ctn_price">
        <input placeholder="Quantity" id="quantity" class="form-control" type="text" name="order[single_orders_attributes][0][qty]">
        <input placeholder="Amount" id="amount" readonly="readonly" class="form-control" type="text" name="order[single_orders_attributes][0][price]">
        <a class=" remove_nested_fields_link" data-delete-association-field-name="order[single_orders_attributes][0][_destroy]" data-object-class="single_order" href="">x</a>
      </div>
</fieldset>

另外2个ctn_price_field将复制在第一个nested_field元素上选择的任何产品的价格。任何人都可以显示我的代码出错了吗？我的jQuery代码或我的rails出现了问题吗？谢谢你提供的任何帮助..