Javascript 嵌入式表单多字段-Symfony2 JQuery多字段

我想做的是“嵌入表单集合”，如下所述：

我已经成功地将它正确地设置好，并且在添加JavaScript/JQuery的阶段，它工作得很好。但是现在我已经添加了JQuery部分，我无法让它正常工作

初始加载形式 单击“添加产品”一次后形成

正如您在上面看到的，当我单击add product时，它正在添加2组add product表单。这本身就是不对的。更糟糕的是，添加的两个新行中的第一行不会持久化到数据库中。每次我“添加新产品”时都会发生同样的事情

现在，文档只涉及一个归档的“标签”，但我认为仅仅根据我的需要调整教程就足够了。我在我的实体/映射/控制器和视图中到处摆弄，试图对其进行排序。我想我已经修补了一切，试图使它正确，但不能。除了JQuery代码本身，因为我对JQuery或Javascript一无所知（目前学习PHP的工作已经够多了，不会使事情复杂化，尽管我完全打算在掌握了Symfony之后马上学习它）

//配方表

class RecipeType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('recipename') ->add('recipedesc')
        ->add('recipeyeild') ->add('recipecost');
    $builder->add('product', 'collection', array(
    'type' => new ProductRecipeType(),
    'allow_add'    => true,
    'by_reference' => false,
    'allow_delete' => true,));
}

class ProductRecipeType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
->add('amount') ->add('product');
}

//产品配方表

class RecipeType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('recipename') ->add('recipedesc')
        ->add('recipeyeild') ->add('recipecost');
    $builder->add('product', 'collection', array(
    'type' => new ProductRecipeType(),
    'allow_add'    => true,
    'by_reference' => false,
    'allow_delete' => true,));
}

class ProductRecipeType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
->add('amount') ->add('product');
}

//菜谱视图new.twig

<h1>Recipes creation</h1>
{{ form_start(form) }}
{{ form_row(form.recipename) }} {{ form_row(form.recipedesc) }}
{{ form_row(form.recipeyeild) }} {{ form_row(form.recipecost) }}

<h3>Products</h3>
<ul class="product" data-prototype="{{ form_widget(form.product.vars.prototype)|e }}">       

{% for products in form.product %}
    {{ form_row(products.amount) }}
    {{ form_row(products.product) }}
{% endfor %}
</ul>
{{ form_end(form) }}

特别是.find（“：input”）部分，因为我猜它正在计算输入字段，但这只是纯粹的猜测工作

另外，当我问这个问题时，我也希望“添加产品”链接没有删除按钮，因为当单击它时，它会从表单中完全删除“添加产品”链接，而获得它的唯一方法是刷新页面。我想我已经涵盖了一切

编辑 这是从“查看源代码”创建的原型（老实说，看起来很恶心lol）

那好吧，我想我已经基本破解了

问题1： “添加产品”按钮生成了3个“表单”，但只保留了2个

答复1： 将

标记添加到表单中的所有行

 {% for products in form.product %}
   <li>{{ form_row(products.amount) }}</li>
   <li>{{ form_row(products.product) }}</li>
 {% endfor %}

为此：

$collectionHolder.find('li.formrowprod').each(function()

问题3： 现在几乎所有的东西都被修复了，除了仍然有“DeleteDelete”（开始行上的两个删除按钮彼此相邻，既丑陋又不必要（每个配方至少有一种产品，因此没有人想删除所有产品）

答复3：

从.find（）中完全删除li：

---

所以现在一切都正常了，但是当我点击“添加产品”时，它仍然会加载2行而不是1行，但这并不是世界末日，但如果有人能帮忙，我很想知道为什么

  <li class="formrowprod">{{ form_row(products.product) }}</li>

$collectionHolder.find('li').each(function()

$collectionHolder.find('li.formrowprod').each(function()

    $collectionHolder.find('formrowprod').each(function() {
    addProductsFormDeleteLink($(this));
    });