jQueryの後にfancyboxモーダルが空白になります。クローン（）

Question

フォームを表示するfancybox iframeがあります。フォームの中で私は

<div class="subItem"> 
    <input type="text" class="form__textInput__field" name="subItems[]"> 
    <button class="clone">Add</button> 
    <button class="remove">Remove</button> 
</div> 

アイデアは、ユーザーがそれで親のdiv、すべてを「追加」および「削除」ボタンをクリックして、クローンを作成することができるということです...以下のコードを持っています。

私はこの2つの方法を試しました。まず、以下のようにクローンを使用します。

$("button.remove").click(function() { 
    $(this).parent().remove(); 
}); 
$("button.clone").click(function() { 
    $(this).parent(".subItem").clone().appendTo(".subItem"); 
}); 

種類のコピー/ペーストで第二に、。

$("button.remove").click(function() { 
    $(this).parent().remove(); 
}); 
$("button.clone").click(function() { 
    var content = $('.subItem').html(); 
    var newdiv = $('<div class="subItem">'); 
    newdiv.html(content); 
    $('.subItem').after(newdiv); 
}); 

これらの両方のインスタンスでは、新しいフォームフィールドがボタンで表示され、モーダルが完全に空白になることが簡単にわかります。重複したIDが取り込まれた場合にコンテンツがロードされないようにしようとするファンシーボックスだと感じていますが、わかりません。この複製をどのように機能させるには？私はいくつかのフォームのクローンを作成し、後でそれと対話できるようにする必要がある場合は、私の作品

var $div = $('div[id^="subItem"]:last'); //look for the last object with the id "subItem" 
var num = 2; //maybe you can use a random number to hang it on the id 
var $klon = $div.clone().prop('id', 'subItem'+num); //clone the div and give it another id 

：

Answer 1

たぶん、このIDの重複を取り除くためにしてみてください。

Answer 2

私はこの質問を投稿しても愚かだと感じます。これらのボタンのいずれかが内部に入れ子になっているフォーム以外のものと関連付けられていない場合、それは提出を引き起こしていました。私はモーダルのためのhtmlを掘り下げなかったので、それが引き上げられたアドレスを見たことはありませんでした。私はこれらをdivのものに変更しました。