複数のネストされたフィールドのjQueryが最初にしか動作しない

Question

私はこの分野で弱いため、jQueriesのヘルプをもう一度求めています。私は正常にjQueryを私の注文フォームに実装しました。これはproduct_idがcollection_selectドロップダウンメニューから選択されるたびにテキストフィールドに価格を表示します。

私のフォームは以下の通りです：

<%= form_for(@order) do |f| %> 
. 
. 
. 
<%= 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", id: "ctn_price", 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" %> 
<% end %> 

私はorders.js.coffeeファイルを介してjQueryを介して、

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

をproduct_pricesをGETしてget_product_prices.js.erb

を使用してそれを表示することができました

$('.ctn_price_field').val(<%= @product.price %>)  

すべてが動作していることを確認すると、複数の入れ子フィールドを追加すると、jQueryは最初のネストされたフィールドのみを検出し、最初の.ctn_price_fieldを変更するだけです。この同じフォームで複数のネストされたフィールドを生成し、選択した製品に応じて各ネストされたフィールドを変更することができます。前もって感謝します！！

誰かが私を助けることができますか？

Answer 1

同じクラスに関連付けられているすべての要素にアクセスするには、そのクラスに対してそれぞれを実行する必要があります。同様に -

$(".product_selection").each(function() { 
    // ... 
}); 

あなたの要素がHTMLでバインドされた後に、このバインディングが呼び出されることを確認してください。

または使用することができます -

$('.product_selection').change(function(){ 
    // code goes here 
});