如何使用Javascript按需复制表单部分？

目标复制一个表单部分，以便在需要时可以输入多个条目。加载的表格将允许x1（一）项详细信息。但是，如果我单击“添加任务”三次，表单将在屏幕上复制三次，可以创建四个条目，单击两次表单将复制两次，您可以创建两个附加条目

我的问题-我是javascript新手，一直在学习一个教程，现在已经不太习惯了。我的代码不允许我实现目标。如何修改代码以允许我在单击时复制表单

我没有任何可见的错误我的页面只是加载，但什么也没有发生

其他信息-与问题无关，但我正在RubyonRails上构建代码

我的表单-请参阅之间的部分----我希望我的代码在单击时复制

    <%= render 'layouts/errors', obj: @category %>
    <p>
      <p>
    <%= simple_form_for(@category) do |f| %>

    <div class='form-group row'>
      <div class='col-sm-8'>
          <%= f.label :name, 'Category : ' %>
      </div>
      <div class="control col-sm-8 mb-4">
        <%= f.text_field :name, class: 'input is-focused form-control', type: 'text', placeholder: 'Job Category Name', autofocus: true  %>
      </div>
    </div>

----this below is the section of my code to replicate --------------------
    <tbody class='fields'>
      <%= f.simple_fields_for :pricings do |builder| %>
      <%= render 'pricing', f: builder %>
      <% end %>
    </tbody>
----this above is the section of my code to replicate -------------------

    <div class='form-group row'>
         <div class='col-md-12 mb-4'>
           <%= f.submit class: 'button is-info is-medium is-fullwidth' %>
           <%= link_to_add_row('Add Task', f, :pricings, class: 'btn btn-primary') %>
         </div>
    </div>

    <% end %>



    <div class='col-xs-4 offset-sm-2'>
       [ <%= link_to 'Return to active listings', @listing %> ]
    </div>

最后是我的javascript代码，它存在于assets>>javascripts>>application.js

$(document).on('turbolinks:load', function(event) {

  $('form').on('click', '.remove_record', function(event){
    $(this).prev('input[type=hidden]').val('1');
    $(this).closest('tr').hide();
    return event.preventDefault();
  });

  $('form').on('click', '.add_fields', function(event) {
    var regexp, time;
    time = new Date().getTime();
    regexp = new RegExp($(this).data('id'), 'g');
    $('fields').append($(this).data('fields').replace(regexp, time));
    return event.preventDefault();
  });
});

---

你可以试试我的宝石或宝石茧，两者的效果非常相似。您似乎走在正确的道路上，很难判断问题，因为您没有看到任何错误。如果我正确理解您的javascript，那么您似乎在

$（'fields'）

元素后面附加了一个字符串常量，而不是您所希望的html。您需要一个容器元素，在其中追加新表单字段，然后追加html。建议您在

$（'fields'）…

行中放置一个断点，并检查要追加的内容以及追加的位置。我认为这不是你想要的。

$(document).on('turbolinks:load', function(event) {

  $('form').on('click', '.remove_record', function(event){
    $(this).prev('input[type=hidden]').val('1');
    $(this).closest('tr').hide();
    return event.preventDefault();
  });

  $('form').on('click', '.add_fields', function(event) {
    var regexp, time;
    time = new Date().getTime();
    regexp = new RegExp($(this).data('id'), 'g');
    $('fields').append($(this).data('fields').replace(regexp, time));
    return event.preventDefault();
  });
});