2012-03-22 107 views
1

我在文本框旁邊有一個按鈕,當我單擊按鈕時,我希望它在另一個文本框旁邊創建另一個按鈕。這段代碼就是這樣做的,但新的按鈕不起作用。創建自身副本的按鈕

<div id="algorithm"> 
    <input type="button" id="add_child" value="+" /> 
    <input type="text" id="textbox0" /> 
</div> 

$('#add_child').click(function() { 
    $('<input type="button" id="add_child" value="+" />').appendTo('#algorithm'); 
    $('<input type="text" id="textbox0" />').appendTo('#algorithm'); 
}); 
+4

因爲您在 – hjpotter92 2012-03-22 21:29:17

+0

上使用相同的'id'是的,使用'class' – 2012-03-22 21:29:42

+2

另外,複製的按鈕不會繼承定義爲'$(「...」)的函數, .click(...)',因爲這是一次性綁定。您還需要重新綁定該功能。 – 2012-03-22 21:30:31

回答

3

我建議嘗試這種方法:

$('#algorithm').on('click','input',function(){ 
    $(this).clone(true,true).insertAfter($(this)); 
}); 

JS Fiddle demo

修訂上面的代碼來更新id屬性,以便有沒有重複:

$('#algorithm').on('click','input',function(){ 
    $(this).clone(true,true).attr('id','add_child' + $('input[type="button"]').length).insertAfter($(this)); 
});​ 

JS Fiddle demo

參考文獻:

+0

真的,我的最終目標是創建一個文本框,在左側和右側創建一個「兄弟」文本框,並在其下方創建一個「子」文本框。有任何想法嗎? – mharris7190 2012-03-22 23:57:20

0

你的代碼有很多問題。首先;

首先;你的綁定是不活的,所以你添加的任何新元素都不會獲得相同的功能。

其次,你正在創建具有相同ID的多個元素......一個BIG不不不!第三,既然your'e使用ID選擇器,它會停止尋找avter它發現第一個,但我確實有一種預感,如果你改變你的綁定到$()。live(「click」,函數(){})

+0

是的,我很新的品牌,但如何讓它只是繼承了一個類的功能。又,我真的不知道如何創建一個不是css類的類? – mharris7190 2012-03-22 23:54:20