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

我有一组可以复制的字段。现在在这些领域内还有特定的领域是重复的。在动态添加的元素中动态添加字段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>

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将克隆它不会工作）

来源

2017-02-12 Friency Fernandez

我设法解决它通过改变我的遍历方法，只是分配字段添加到变量。我已经改变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

来源

2017-02-14 06:08:48

jQuery仅在运行时才了解页面中的元素，因此动态添加到DOM中的新元素无法通过jQuery识别。为了解决这个问题，使用事件委托，将新添加的项目中的事件冒泡直至jQuery在加载页面时运行的DOM中的一个点。许多人使用文档作为捕捉冒泡事件的地方，但是没有必要一直到DOM树。理想情况下，您应该委托给页面加载时存在的最近的父代。

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

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

来源

2017-02-12 17:15:39 Mvram

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

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

回答

相关问题