Question

我正在建立餐厅管理应用程序，我可以选择在订单中添加某些菜肴。从下拉列表中选择菜肴，我希望根据所选菜肴更新文本字段的值。 Just like in that gif

正如你在gif中看到的那样，当我选择第一个字段时，值才会更新，而不是我用cocoon gem动态添加的字段。我的表单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
});

嵌套轨道中的动态值不会更新

1 个答案: