Как клонировать элементы, которые были связаны виджетом jQuery UI? - PullRequest
Новая
       16

Как клонировать элементы, которые были связаны виджетом jQuery UI?

5 голосов
/ 15 марта 2012

Следующий код не может правильно клонировать элемент ввода.Щелчок / фокусировка на клонированном вводе открывает средство выбора даты на исходном вводе.

http://jsfiddle.net/musicisair/YUkZw/

<input>
<script>
    var input = $("input").datepicker();
    $("body").append("<br>Input 2: ").append(
        input.clone(true);
    );
</script>

Существует ли правильный способ клонирования элементов, связанных с виджетом jQuery UI?Если да, то что это?

Ответы [ 2 ]

5 голосов
/ 15 марта 2012

Обычно любые обработчики событий, связанные с исходным элементом, не копируются в клон.Необязательный параметр withDataAndEvents позволяет нам изменить это поведение и вместо этого создавать копии всех обработчиков событий, связанных с новой копией элемента.Начиная с jQuery 1.4, все данные элемента (присоединенные методом .data ()) также копируются в новую копию.

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

var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
    $clone = $elem.clone( true )
    .data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing

Начиная с jQuery 1.5, withDataAndEvents может быть дополнительно улучшен с помощью deepWithDataAndEvents для копирования событий и данных для всех дочерних элементов клонированногоelement.

Источник: http://api.jquery.com/clone/

Я полагаю, вы ищете приведенный выше код, который фактически копирует данные, связанные с элементом, а не разделяет данные между элементами.

Обновление

После нескольких минут работы с этим вот что я придумал: 

//create original datepicker
var $input = $("input").datepicker(),

//clone the datepicker, copy the data from the original, and change the ID of the new element
    $clone = $input.clone(true).data( "datepicker", $.extend( true, {}, $input.data("datepicker") ) ).attr('id', 'test-id');

//now change the references in the data for the clone to point to the clone
$clone.data('datepicker').input = $clone;
$clone.data('datepicker').id = 'test-id';


//add the clone to the DOM
$("body").append("<br><br><br>Input 2: ").append(
    $clone
);
​

И демо: http://jsfiddle.net/YUkZw/5/

0 голосов
/ 21 июля 2017

Вот мой трюк.

Если вам нужно клонировать элемент, у которого есть виджет, не связывайте виджет с document.ready .Вместо этого регенерируйте виджет каждый раз, когда элементы получают фокус. 

$(document).ready(function(){
    $("[type=date]").focusin(function(){
        $("[type=date]").not(this).datepicker("destroy");
        if($(this).data("datepicker") == null) {
            $(this).datepicker({dateFormat: 'yy-mm-dd'});
        }
    });
});
...