Как клонировать элемент jQuery с его данными

Question

Как клонировать элемент jQuery с его данными

0

Как мы можем клонировать элементы 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

Ionică Bizău 18 сен. 2013, в 18:37

Источник

Теги:

javascript

jquery

html

3 ответа

2

clone принимает аргумент withDataAndEvents, так что:

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

чтобы получить только данные, просто отключите события.

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

скрипка

PSL 18 сен. 2013, в 15:06

0

Данные привязываются к элементу как простой объект 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/

EDIT: Не знаю, почему это было занижено. Вы предполагаете, что некоторые накладные расходы копируют как данные, так и события в качестве исходного ответа. Оба действительны.

bmasterson 18 сен. 2013, в 15:19

0

Я не знаю, кто это проголосовал. но это выглядит не плохой вариант для меня ... так что мой +1 ..
PSL 18 сен. 2013, в 23:13

Ещё вопросы

Я не знаю, кто это проголосовал. но это выглядит не плохой вариант для меня ... так что мой +1 ..

Archer · Accepted Answer · 2013-09-18T13-24-00.000Z

У вас просто отсутствовал 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();

Это также копирует события. Могу ли я избежать этого? Мне нужны только данные. Во всяком случае, это правильный ответ. ;-)
Вы можете просто удалить события из клона. Я обновлю ответ.