如何克隆 jQuery 元素及其数据

How to clone jQuery element with its data

本文关键字：数据 元素 何克隆 jQuery      更新时间：2023-09-26

我们如何用jQuery元素的数据克隆它们？

使用.data("dummy", "test")我设置"test"数据以"dummy"选定元素的键。使用.data("dummy")返回"test" 。克隆后.data("dummy")返回undefined。

我怎样才能避免这种情况？

$(".save").on("click", function () {
    var dummy = $(this).data("dummy");
    if (dummy) {
        return alert(dummy);
    }
    $(this).data("dummy", "I am a button");
    var $clone = $(this).clone();
    $(this).after($clone);
});

吉斯菲德尔

您只是缺少 1 个参数...

http://jsfiddle.net/DEKFn/2/

请注意clone()中使用true。 这决定了在克隆元素时是否复制数据和事件，根据文档。

http://api.jquery.com/clone/

$(".save").on("click", function () {
    var dummy = $(this).data("dummy");
    if (dummy) {
        return alert(dummy);
    }
    $(this).data("dummy", "I am a button");
    var $clone = $(this).clone(true);
    $(this).after($clone);
});

您还询问了如何仅复制数据，而不是事件。 这是不可能的，但您可以像这样删除所有事件处理程序...

    var $clone = $(this).clone(true);
    var $clone.off();
克隆

与DataAndEvents争论，所以这样做：

var $clone = $(this).clone(true);

要仅获取数据，只需关闭事件即可。

var $clone = $(this).clone(true).off();

小提琴

数据作为简单的javascript对象附加到元素。只需复制数据并将其分配给克隆即可。

$(".save").on("click", function () { 
    var dummy = $(this).data("dummy");
    if (dummy) {
        return alert(dummy);
    }
    var $this = $(this);
    $this.data("dummy", "I am a button");
    var $clone = $this.clone();
    var $data = $.extend(true,{},$this.data());
    $clone.data($data);
    $(this).after($clone);
});

更多关于 .extend（） http://api.jquery.com/jQuery.extend/

在这里摆弄

http://jsfiddle.net/9Q7EM/编辑：不知道为什么这被否决了。按照原始答案的建议，复制数据和事件会产生一些开销。两者都有效。

相关文章：