Javascript 如何在jquery/rails中呈现新字段？

我在jquery/rails中呈现元素时遇到问题

我想这样做：

当用户单击按钮“+”时，另一个包含“选择成分”的字段应呈现在默认字段下方（因为饮料可能含有大量成分，我不想指定数量）

我想不出来，所以我得寻求帮助

视图/饮料/new.html.erb

<%= form_for @drink do |f| %>

  <div class="form-group">
    <%= f.label :name %><br />
    <%= f.text_field :name, class:'form-control' %><br />
  </div>

  <div class="form-group">
    <%= f.label :category %><br />
    <%= f.select :category_id, Category.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'}, class:'form-control' %><br /><br />
  </div>

  <div class="form-group", id: "add-ingredients">
    <%= f.label :ingredient %><br />
    <%= f.select :ingredient_id, Ingredient.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select Few'}, class:'form-control' %><%= f.button "+", class:'btn btn-primary', id: 'btn-ingredients' %><br />
  </div>

  <div class="form-group">
    <%= f.label :preparation %><br />
    <%= f.text_area :preparation, class:'form-control'%><br />
  </div>

  <%= f.submit "Submit", class:'btn btn-primary' %>
  <%= link_to "Cancel", drinks_path, class:'btn btn-default' %>

<% end %>

“选择一个”}，类：'form-control'>




'Select now'}，类：'form-control'>

application.js

$(document).ready(function(){
  $('#btn-ingredients').click(function(){
    $('#add-ingredients').append('<%= render("form-group") %>');
  });
});

$（文档）.ready（函数（）{
$（“#btn配料”）。单击（函数（）{
$（“#添加成分”）。附加（“”）；
});
});

---

我尝试了很多次，可能很简单，但我是一个新手，没有其他想法。

application.js

是一个静态文件，例如，它不是由ERB处理器预处理的。它按原样进入用户浏览器，在客户端执行时，此代码：

$('#add-ingredients').append('<%= render("form-group") %>');

---

另外请注意，实际上是将新创建的元素附加到元素的末尾，而不是后面。因此，在调用之后，新的“form group”元素将添加到“#add Components”内容的末尾，这可能是不受欢迎的，因为它也有类“form group”。

好吧，你可以通过某些方式做到这一点，我只想说多次直接操纵DOM是一种反模式。现在，您有React/Redux或ClojureScript等框架，它们处理全局状态，并在全局状态“成分”发生变化时自动重新呈现DOM

---

也许现在不行，但要记住这一点。处理“单页应用程序”中的状态很棘手。

您可能想尝试一下

$('#add-ingredients').append('<div class="form-group">...</div>');