javascript - 如何使用其数据克隆 jQuery 元素

Question

我们如何使用数据克隆 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);
});

JSFIDDLE

Answer 1

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

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

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

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();

Answer 2

clone 需要一个参数withDataAndEvents，所以这样做：

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

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

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

小提琴

Answer 3

数据作为简单的 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/

Fiddle here http://jsfiddle.net/9Q7EM/

编辑：不知道为什么这被否决了。正如原始答案所建议的那样，您在复制数据和事件时会产生一些开销。两者都是有效的。