1

.clone()jqueryで要素を複製し、それを保存して、$(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/

4

3 に答える 3

0

さて、私にとっての最初のステップは、クラス属性を優先して ID 属性を削除することです。jQuery.comから:

「注: .clone() を使用すると、重複した id 属性を持つ要素が生成されるという副作用があります。これは一意であると想定されています。可能であれば、この属性を持つ要素の複製を避けるか、代わりにクラス属性を識別子として使用することをお勧めします。」

を使用するとどうなります.clone(true)か? これは「ディープコピー」を行います。

于 2014-09-26T14:22:33.857 に答える
0 
$('.clone button').on('click', function() {
    var cloneNode = $(this).parent().clone();
    $(window).data('cloneNode', cloneNode);
    console.log(cloneNode);

$('.clone button') を取得すると、ドキュメント内のすべてのクローン ボタンが取得されます。1つだけつかみます。

$('.clonebutton')[0].on(...)
于 2014-09-26T14:49:53.147 に答える
0

クローンを複製する必要があります。そうしないと、同じ要素を再利用しています。

また、要素の 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"。$('#files')ID は一意でなければならないため、jQuery は最初のもの (たとえば ) のみを表示できます。

于 2014-09-26T14:36:36.410 に答える