Javascript 在元素中动态添加字段，该元素也在Jquery中动态添加

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

这是我的标记的一个示例

<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 removebutonv=“删除”；
var removeButton=“删除”；
$（'.add_牺牲品_b'）。单击（函数（）{
$（'div.item\u受害者\u关系：last'）。
在（$（'div.item_受害者_关系：first'）.clone（）之后；
$（'.add_被害人_b:last'）.remove（）；
$（'.text-info:last'）.text（“（删除这些字段）”）；
$（removeButtonV）.insertAfter（（'.text-info:last'）；
});
$（文档）。在（'单击'，'上。删除项目，函数（）{
$（this）.closest（'div.item_受害者_关系'）。remove（）；
});
$（'.add_items'）。单击（函数（）{
$（'div.item_1:last'）。在（$（'div.item_1:first'）.clone（）之后；
$（'div.item_1:last'）。追加（removeButton）；
$（'hr.item_b_separator:last'）。removeClass（'hidden'）；
});
$（文档）。在（'单击'，'上。删除项'，函数（）{
$（this）.closest（'div.item_1'）。remove（）；
});

这段代码复制了受害者以及与受害者字段的关系。当项目_1尚未复制时，它可以正常工作，但当项目_1复制时，这两个字段也会附加到项目_1的最后一个实例中的字段的最后一个实例上。我想要做的是将这两个字段追加到它们所属的项_1上的最后一个实例之后

我认为我的穿越方式是错误的。我试过几种方法，但似乎都不管用

下面是问题的一个演示：

---

下面是我想要的一个示例（每个都有自己的类名，项_1不能复制，但如果要克隆项_1，它将不起作用）

jQuery在运行时只知道页面中的元素，因此动态添加到DOM中的新元素无法被jQuery识别。为了解决这个问题，请使用事件委派（eventdelegation），将事件从新添加的项冒泡到DOM中的某个点，当jQuery在页面加载时，该点就在DOM中。许多人使用文档作为捕获冒泡事件的场所，但不必一直向上遍历DOM树。理想情况下，您应该委托给页面加载时存在的最近的父级

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

---

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

我通过更改遍历方法并只分配要添加到变量中的字段来解决这个问题。 我已将add_受害者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'));
    });

var-victimFields='受害者：受害者与受害者的关系：（删除字段）'；
$（文档）。在（'单击'，'上。添加'u受害者'u b'，函数（）{
var item_b_index=$（this）.closest（'.item_b'）。index（'.item_b'）；
$（受害者字段）.insertAfter（$（'div.item_b'）.eq（item_b_索引）.find（'.item_受害者关系：last'）；
});

它现在可以完美地按照我的要求工作了。您可以在此处查看：

---

嗨！我已经这样做了，但似乎没有解决问题。

    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'));
    });