嵌套 Rails 表单中的动态值未更新
Posted
技术标签:
【中文标题】嵌套 Rails 表单中的动态值未更新【英文标题】:Dynamic values in a nested rails form not updating 【发布时间】:2018-01-29 17:45:27 【问题描述】:我正在构建餐厅管理应用程序,我可以选择将某些菜肴添加到订单中。从下拉列表中挑选菜肴,我希望根据所选菜肴更新文本字段的值。 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);
)
对我来说,它看起来也应该适用于更新的字段。它是错误还是功能?如何使此代码也适用于我稍后添加的字段?
【问题讨论】:
点击添加餐点按钮后尝试检查类名。似乎类名已更改,可能是问题的原因。 @Pavan 感谢您的反馈,但我已经尝试过了。我正在尝试根据 Unixmonkey 的答案找出解决方案。 【参考方案1】:jQuery 的.change
函数会在该代码被解析后立即附加到节点上。与查询选择器匹配的新节点不会添加.change
事件。
相反,您可以观察父对象的变化,并让它像这样附加事件:
$('#order-form').on('change', '.meal-name', function()
console.log('a .meal-time changed');
// your code here
);
【讨论】:
感谢您的回复。这很有帮助。它现在一直在观察变化。但是,当我添加选择标签时,它不会重新分配价格,因此价格保持不变。 See the gif以上是关于嵌套 Rails 表单中的动态值未更新的主要内容,如果未能解决你的问题,请参考以下文章