동적으로 추가 된 요소 내부에서 필드를 동적으로 추가 Jquery

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

필자는 탐색 방법을 변경하고 변수에 추가 할 필드를 할당하여 문제를 해결할 수있었습니다. 내가 뭔가 지금은 완벽하게 내가 원하는대로 작동이

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

에 add_victim_b의 핸들러를 변경했습니다. 여기에서 볼 수 있습니다 : DEMO

Answer 2

jQuery는 페이지가 실행될 때 페이지의 요소 만 인식하므로 DOM에 동적으로 추가 된 새 요소는 jQuery에서 인식 할 수 없습니다. 문제 사용 이벤트 위임을 방지하기 위해 새로 추가 된 항목의 이벤트를 jQuery가 페이지로드시 실행 된 DOM의 한 지점까지 버블 링합니다. 많은 사람들이 문서를 버블 링 된 이벤트를 포착 할 장소로 사용하지만 DOM 트리까지 올 필요는 없습니다. 이상적으로는 페이지를로드 할 때 가장 가까운 부모에게 위임해야합니다.

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

.on() 함수를 사용하면 문제가 해결됩니다.