2016-05-20 83 views
0

我有一個fancybox iframe,它顯示了一個窗體。在表格我有下面的代碼...fancybox莫塔爾在jQuery後變成空白.clone()

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

的想法是,用戶將能夠點擊「添加」和「刪除」按鈕和克隆父DIV和它的一切。

我試過這兩種不同的方法。首先,使用如下的克隆。

$("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); 
}); 

在這兩種情況下,我都可以簡單地看到新的表單域與按鈕一起出現,然後模態變爲完全空白。我有一種感覺,這是fancybox試圖阻止內容加載,如果重複的id被引入,但我不確定。我如何才能使這種重複工作?

+0

嘗試使用.clone(true,true) –

+0

@BhojendraNepal - 結果是一樣的。 – user2530671

回答

0

也許試試這個擺脫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 

這個工作對我來說,當我克隆了一些表格和需要能夠以後與他們互動。

+0

在我的html中沒有id的玩法。 – user2530671

0

即使發佈這個問題,我感到很愚蠢。如果沒有將這些按鈕之一與除嵌套在其中的表單以外的任何其他按鈕關聯,則會導致提交。我沒有深入到模態的HTML,所以我從來沒有看到它拉起來的地址。我將這些改爲div,現在他們複製得很好。