ネストされたレールの動的値は更新されません

Question

私はレストラン管理アプリケーションを構築しており、注文に特定の料理を追加するオプションがあります。料理はドロップダウンリストから選択され、選択した料理に基づいてテキストフィールドの値を更新します。 Just like in that gif。

gifでわかるように、最初のフィールドを選択したときに値が更新されるだけで、繭の宝石で動的に追加されるフィールドの値は更新されません。次のように私のフォームHAMLはなります

= simple_form_for @order do |f| 
    .meals 
    = f.simple_fields_for :meals, @order.meals.build do |meals| 
     = render 'meal_fields', f: meals 
    .links 
     = link_to_add_association 'Add meal', f, :meals 
    = f.submit 

をしてmeal_fields.haml部分

.nested-fields 
    = f.select(:name, options_for_select(@dishes.map{ |dish| [dish.name, 
{'data-description' => dish.price}]}), {include_blank: true}, {class: 'meal- 
name'}) 
    = f.select :quantity, options_for_select((1..10)) 
    = f.text_field(:price, disabled: true) 
    = link_to_remove_association "X", f 

にそのための私のjQueryのコードは以下のようになります。私にとって

$(".meal-name").change(function(){ 
    var chosen = $(this).find(":selected"); 
    var price = chosen.data("description"); 
    $(this).siblings("input").val(price); 
}) 

それも適用する必要があるように見えます更新されたフィールドに追加します。バグか機能ですか？後で追加するフィールドにこのコードを適用するにはどうすればよいですか？

Answer 1

jQueryの.change関数は、コードが解析されるとすぐにノードに追加されます。クエリセレクタと一致する新しいノードには、.changeイベントが追加されません。

代わりに、あなたは、変更のための親オブジェクトを見て、そしてそれはこのようなイベントを添付することができます：

$('#order-form').on('change', '.meal-name', function() { 
    console.log('a .meal-time changed'); 
    // your code here 
});