$.clone() & $.data() странное поведение

Question

Может кто-нибудь объяснить мне, почему, когда я клонирую элемент с помощью jquery .clone(), храните его в $(windows).data('myclone') и добавить этот клонированный элемент данных к другому элементу, клонированные данные присутствуют в $(windows).data('myclone') изменения? (указывает на мой недавно созданный элемент в инспекторе HTML)

<li class="clone">
    <button class="file-list-delete"><a href="#">clone this</a>
    </button>
    <input type="file" size="30" id="files" multiple="multiple" name="files" class="upload-files">
</li>
<button id="append">append clone</button>

<script>
    $('.clone button').on('click', function() {
        var cloneNode = $(this).parent().clone();
        $(window).data('cloneNode', cloneNode);
        console.log(cloneNode);
    });
    $('#append').on('click', function() {
        console.log($(window).data('cloneNode'));
        var clone = $(window).data('cloneNode');
        $('.clone').after(clone);
    });
</script>

Вот скрипка, чтобы увидеть это в вашей консоли. Сначала созданный элемент - это просто клонированные данные, затем, когда вы добавляете его, он меняет его http://jsfiddle.net/50eu0bnp/

Answer 1

Вам нужно клонировать клон, в противном случае вы повторно используете тот же элемент.

Вам также нужно настроить таргетинг только на один из элементов или дублировать его после каждого существующего class="clone" элемент, который вызывает создание дополнительных копий.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/50eu0bnp/1/

$('.clone button').on('click',function(){
   var cloneNode = $(this).parent().clone();
    $(window).data('cloneNode',cloneNode);
});
$('#append').on('click',function(){
    var clone = $(window).data('cloneNode').clone();  // Clone the clone
    $('.clone:last').after(clone);
});

Если элементы, которые вы клонируете, могут отличаться (в данный момент они не изменяются), вам нужно перейти к делегированным обработчикам событий, как к оригиналу. $('.clone button') не подключен к новым копиям: http://jsfiddle.net/TrueBlueAussie/50eu0bnp/3/

$(document).on('click', '.clone button', function () {
    var cloneNode = $(this).parent().clone();
    $(window).data('cloneNode', cloneNode);
});

Вам также необходимо решить проблему дублирования id="files" поскольку это полное нет-нет. jQuery сможет видеть только первый (например, с $('#files')), поскольку идентификаторы должны быть уникальными.

Answer 2

$('.clone button').on('click', function() {
    var cloneNode = $(this).parent().clone();
    $(window).data('cloneNode', cloneNode);
    console.log(cloneNode);

когда вы берете $('. кнопка клона'), вы захватываете каждую кнопку клона в документе. хватай только один.

$('.clonebutton')[0].on(...)

Answer 3

Ну, первым шагом для меня было бы удалить атрибут ID в пользу атрибутов класса. С jQuery.com:

"Примечание. Использование.clone() имеет побочный эффект при создании элементов с дублирующимися атрибутами id, которые должны быть уникальными. По возможности рекомендуется избегать клонирования элементов с этим атрибутом или использования атрибутов класса вместо идентификаторов".

Что происходит, когда вы используете .clone(true)? Это делает "глубокую копию".