Question

我有一个表单，用于加载嵌套字段。如果我只有一个div fields，它可以正常工作；但是如果我有2个div用于不同的表单字段类型，它会使请求加倍，并且它会添加2个字段而不是1。我尝试使用函数.closest但根本不起作用

这是我所拥有的

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

然后在我的表单内

<div class="nested-form">
  <div class="fields">
    <div class="form-group">
      <select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
        <option value="Musicians">Musicians</option>
        <option selected="selected" value="Acting">Acting</option>
        <option value="Modeling">Modeling</option>
        <option value="DJs">DJs</option></select>
    </div>
  </div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name=&quot;user[talent_genres_attributes][70350559861960][genre]&quot; id=&quot;user_talent_genres_attributes_70350559861960_genre&quot;><option value=&quot;Musicians&quot;>Musicians</option><option value=&quot;Acting&quot;>Acting</option><option value=&quot;Modeling&quot;>Modeling</option><option value=&quot;DJs&quot;>DJs</option></select><input as=&quot;hidden&quot; type=&quot;hidden&quot; value=&quot;false&quot; name=&quot;user[talent_genres_attributes][70350559861960][_destroy]&quot; id=&quot;user_talent_genres_attributes_70350559861960__destroy&quot; /><a class=&quot;remove_record btn btn-danger&quot; href=&quot;#&quot;>Delete</a></div></fieldset>" href="#">Add Genres</a>

<div class="nested-form">
  <div class="fields">
    <div class="form-group">
      <select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
       <option selected="selected" value="Musicians">Musicians</option>
       <option value="Acting">Acting</option>
       <option value="Modeling">Modeling</option>
       <option value="DJs">DJs</option></select>
    </div>
  </div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name=&quot;user[talent_locations_attributes][70350580425060][location]&quot; id=&quot;user_talent_locations_attributes_70350580425060_location&quot;><option value=&quot;Los Angeles&quot;>Los Angeles</option><option value=&quot;Chicago&quot;>Chicago</option><option value=&quot;Detroit&quot;>Detroit</option><option value=&quot;Miami&quot;>Miami</option><option value=&quot;New York&quot;>New York</option><option value=&quot;San Francisco&quot;>San Francisco</option></select><input as=&quot;hidden&quot; type=&quot;hidden&quot; value=&quot;false&quot; name=&quot;user[talent_locations_attributes][70350580425060][_destroy]&quot; id=&quot;user_talent_locations_attributes_70350580425060__destroy&quot; /><a class=&quot;remove_record btn btn-danger&quot; href=&quot;#&quot;>Delete</a></div></fieldset>" href="#">Add Locations</a>

顺便说一下，这是我之前在两个.fields div容器中添加字段的版本

  $('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 eevent.preventDefault();
  });

Answer 1

我通常按照以下方式做事：

<div id='fields_area'></div>

然后使用$('#fields_area').append('.fields_container');添加字段

和$(this).closest('.fields_container').remove();（由.fields_container中的按钮触发）以删除字段。

将您的数据*包裹在<div class="fields_container"></div>中，应该这样做。

编辑：结帐cocoon：https://github.com/nathanvda/cocoon

jQuery的嵌套表单字段

1 个答案: