Question

我有一组可以复制的字段。现在，在这些字段中，还有特定的字段是重复的。

这是我的标记的一个例子

<div class="item_1">
<button type="button" class="fluid-inline btn btn-primary add_items">Add fields</button>
<hr />
 <div class="col-sm-4 m-b-10px">
   <label><h5>OCCUPATION: </h5></label>
   <input name=b_occ[] type="text" class="form-control" required=required>
  </div>
  <div class="col-sm-4 m-b-10px">
    <label><h5>WORK ADDRESS: </h5></label>
    <input name=b_work_add[] type="text" class="form-control" required=required>
  </div>
<div class="item_victim_relation">
   <div class="col-sm-4 m-b-10px">
     <label><h5>VICTIM: </h5></label>
     <select class="form-control" name="victim_name[]" required=required>
       <option value="victim_id"><h5>Victim</h5></option>
     </select>
   </div>
   <div class="col-sm-4 m-b-10px">
     <label><h5>RELATION TO VICTIM: </h5></label>
     <input name=b_relation[] type="text" class="form-control" required=required>
   </div>
   <div class="col-sm-4 m-b-10px">
     <h5 class="text-info">(IF SUSPECT HAS RELATION TO MULTIPLE VICTIMS) </h5>
     <button type="button" class="dashed-button add_victim_b">Add</button>
   </div>
</div>
</div>

JS

var removeButtonV = "<button type=button class='dashed-button remove_item_v'>Remove</button>";
var removeButton = "<button type=button class='btn btn-primary m-b-10px remove_items'>Remove</button>";

$('.add_victim_b').click(function() {   
    $('div.item_victim_relation:last').
    after($('div.item_victim_relation:first').clone());  
    $('.add_victim_b:last').remove();   
    $('.text-info:last').text("(REMOVE THESE FIELDS)");   
    $(removeButtonV).insertAfter(('.text-info:last'));
});

$(document).on('click', '.remove_item_v', function(){
  $(this).closest('div.item_victim_relation').remove();
});


$('.add_items').click(function() {      
  $('div.item_1:last').after($('div.item_1:first').clone());       
  $('div.item_1:last').append(removeButton);
  $('hr.item_b_separator:last').removeClass('hidden');
});

$(document).on('click', '.remove_items', function(){
  $(this).closest('div.item_1').remove();
});

这段代码复制了受害者和受害者领域的关系。当item_1尚未复制时，它可以正常工作，但是当它出现时，这两个字段也会附加在item_1的最后一个实例内的最后一个字段实例上。我想要发生的是这两个字段在它们所属的item_1上的最后一个实例之后被追加。

我认为我的遍历方式是错误的。我已经尝试了几种方法，但我似乎无法让它发挥作用。

以下是问题的演示： DEMO

以下是我想要的sample（每个都有自己的类名，而item_1不能重复，但如果要克隆item_1则无效）

Answer 1

jQuery在运行时只知道页面中的元素，因此jQuery无法识别动态添加到DOM的新元素。要解决这个问题，请使用事件委派，将新添加的项目中的事件冒泡到DOM中的一个点，当jQuery在页面加载时运行时。许多人使用文档作为捕获冒泡事件的地方，但是在DOM树上一路走来都没有必要。理想情况下，您应该委托给页面加载时最近的父项。

$(document).on('click', 'button.ok', function(e){...

使用.on（）函数可以解决您的问题。

Answer 2

我设法通过更改遍历方法并仅指定要添加到变量中的字段来解决它。我已将add_victim_b的处理程序更改为此

    var victimFields = '<div class="item_victim_relation"><div class="col-sm-4 m-b-10px"><label><h5>VICTIM: </h5></label><select class="form-control" name="victim_name[]" required=required><option value="victim_id"><h5>Victim</h5></option></select></div><div class="col-sm-4 m-b-10px"><label><h5>RELATION TO VICTIM: </h5></label><input name=b_relation[] type="text" class="form-control" required=required></div><div class="col-sm-4 m-b-10px"><h5 class="text-info">(REMOVE FIELDS) </h5><button type="button" class="dashed-button remove_victim_b"><i class="fa fa-minus" aria-hidden=true></i></button></div><div class="clearfix"></div></div>';

    $(document).on('click', '.add_victim_b', function(){    
        var item_b_index = $(this).closest('.item_b').index('.item_b');  
        $(victimFields).insertAfter($('div.item_b').eq(item_b_index).find('.item_victim_relation:last'));
    });

它现在可以完美地运行，就像我想要的那样。你可以在这里查看： DEMO

在动态添加的元素内动态添加字段Jquery

2 个答案: