動的に追加された要素の中にフィールドを動的に追加する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の最後のインスタンス内のフィールドの最後のインスタンスに2つのフィールドが追加されます。私はこれらの2つのフィールドがitem_1の最後のインスタンスの後に追加されるようにします。

トラバースの方法が間違っていると思います。私はいくつかの方法を試みたが、私はそれを働かせるように見えない。ここで

は、問題のデモです： DEMO

ここで（それぞれ独自のクラス名を持っており、item_1が重複することはできませんが、item_1がクローン化されることになる場合、それは動作しないでしょう）私が何をしたいのsampleある

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内のポイントまでイベントをバブリングします。多くの人々が、バブリングされたイベントをキャッチする場所としてdocumentを使用していますが、DOMツリーの上に行く必要はありません。理想的には、ページの読み込み時に存在する最も近い親に委譲する必要があります。

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

.on（）関数を使用すると、問題が解決するはずです。