在動態添加的元素中動態添加字段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

回答

相關問題