jQuery 使用增量 HTML data-id 属性从按钮点击克隆 div

Question

我正在使用 Twitter Bootstrap CSS 框架 + jQuery 构建一个 UI.

在我的界面中，我有几个 div 和一个外部按钮，当单击它们时会复制最后一个，并将其插入 DOM 中最后一个 "new" 的位置，像这样：

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

每个 div 都有一个 data-id HTML 属性，数字从 1 开始，我希望新的动态 div 具有后续 ID。为此，我有：

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

这正是我想要的，但是 ONLY 第一次点击按钮...（即 data-id 正确设置为 2 只有 divs 已经在页面加载中，不是动态添加的）。然而，第二次按下按钮（当动态 div 为 "the last" 时），data-id 仍然是 2，尽管 newDivs 不断插入（正确的方式）一个接一个。 .

知道会发生什么吗？提前致谢。

Answer 1

将newDiv.attr('data-id',id+1)替换为newDiv.data( "id", id + 1 );

发生的事情是您将 data-id 作为属性附加到 DOM 元素。 JQuery 没有将其注册为元素的数据。然后，由于您正在克隆 div，每个克隆的 div 都维护一个数据 ID 2。

jQuery 使用增量 HTML data-id 属性从按钮点击克隆 div

jQuery cloning divs from button click with incremental HTML data-id attribute

javascript

jquery

dom-manipulation