jQuery克隆從按鈕單擊div與增量HTML數據id屬性

Question

我正在使用Twitter Bootstrap CSS框架+ jQuery來構建一個用戶界面。

在我的界面，我有幾個div的，並點擊時克隆他們最後和將其插入到DOM中的「新」的最後一個位置，這樣的外部按鈕：

$(document).on('click', 'button.addDiv', function() { 
    var lastDiv = $(this).closest('.form-group').siblings().last(); 
    var id = lastDiv.data('id'); 
    var newDiv = lastDiv.clone(true); 
    ... 

每個格具有從1開始的數字的data-id HTML屬性，並且我希望新的動態div具有後續的ID。對於這一點，我有：

... 
    newDiv.attr('data-id', id + 1); 
    newDiv.insertAfter(lastDiv); 
}); 

這不正是我想要的東西，但ONLY第一次單擊該按鈕時...（即data-id正確設置爲2只已經在頁面加載的div，不動態添加）。 但是，第二個按鈕被按下（當動態div是「最後一個」時），data-id仍然是2，儘管newDivs在最後一個繼續插入（正確的方式）...

任何想法會發生什麼？ 在此先感謝。

Answer 1

與newDiv.data("id", id + 1);

更換newDiv.attr('data-id',id+1)發生了什麼事是要連接數據-ID的DOM元素作爲屬性。 JQuery不會將其註冊爲元素的數據。然後，由於您克隆了div，因此每個克隆的div都保留一個數據ID 2.