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.