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

<强> Fiddle

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/

在这里小提琴 http://jsfiddle.net/9Q7EM/

编辑：不知道为什么这是低估的。正如原始答案建议的那样，您需要花费一些开销来复制数据和事件。两者都有效。

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

3 个答案: