您當(dāng)前的代碼有幾個(gè)問(wèn)題.其中之一是,正如其他人所說(shuō),添加和刪除按鈕是動(dòng)態(tài)創(chuàng)建的,因此您不能簡(jiǎn)單地將單擊處理程序附加到按鈕.您必須在創(chuàng)建按鈕時(shí)重新附加處理程序,或者將處理程序附加到正文,如@medhi所示：

$("body").on("click", ".addmore", function() { ... });

另一個(gè)問(wèn)題是表單的容器對(duì)于每個(gè)地址沒(méi)有單獨(dú)的容器.因此,當(dāng)您復(fù)制表單元素時(shí),您將復(fù)制已創(chuàng)建的所有元素：每次單擊添加時(shí)元素的數(shù)量加倍.解決方法是將地址表單包裝在單獨(dú)的容器中：

...

...

...

第三個(gè)問(wèn)題是當(dāng)你復(fù)制一個(gè)表單時(shí),如果它不是第一個(gè)表單,它可能已經(jīng)包含一個(gè)刪除按鈕.在這種情況下,您應(yīng)該跳過(guò)刪除按鈕創(chuàng)建.

以下是一個(gè)完整的解決方案.

HTML：

Add More Address

使用Javascript：

var rowNum = 0;

$("body").on("click", ".addmore", function() {

rowNum++;

var $address = $(this).parents('.address');

var nextHtml = $address.clone();

nextHtml.attr('id', 'address' + rowNum);

var hasRmBtn = $('.rmbtn', nextHtml).length > 0;

if (!hasRmBtn) {

var rm = "Remove"

$('.addmoreadd', nextHtml).append(rm);

}

$address.after(nextHtml);

});

$("body").on("click", ".rmbtn", function() {

$(this).parents('.address').remove();

});

總結(jié)

以上是生活随笔為你收集整理的把html追加到指定id后面,javascript – jQuery,动态追加元素时增加id号的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。