$ .clone()和$ .data()奇怪的行为

霍尔默隆

有人可以向我解释为什么,当我使用jquery克隆元素时.clone(),将其存储在$(windows).data('myclone')其中并将此克隆的数据元素附加到另一个元素中,从而导致$(windows).data('myclone')更改后的克隆数据出现了吗?(指向我在html inspector中新创建的元素)

<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/

编码消失了

您需要克隆克隆,否则您将重复使用相同的元素。

您还只需要定位其中一个元素,或者在每个现有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')),因为id必须是唯一的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

$ .clone()和$ .data()奇怪的行为

来自分类Dev

jQuery 1.10 live()和clone()的组合-奇怪的行为

来自分类Dev

结合使用Data :: Dump和JSON :: XS的奇怪行为

来自分类Dev

结合使用Data :: Dump和JSON :: XS的奇怪行为

来自分类Dev

Lodash .clone和.cloneDeep行为

来自分类Dev

||奇怪的Ruby行为 和 &&

来自分类Dev

加入和的奇怪行为

来自分类Dev

OpenXml 和奇怪的行为

来自分类Dev

DateTime和DateTimeZone的奇怪行为

来自分类Dev

Camera和SurfaceView的奇怪行为

来自分类Dev

时区和SimpleDateFormat奇怪的行为

来自分类Dev

查找和du的奇怪行为

来自分类Dev

systimestamp和sysdate的奇怪行为

来自分类Dev

Camera和SurfaceView的奇怪行为

来自分类Dev

strpos和&Oslash;的奇怪行为

来自分类Dev

奇怪的printf和scanf行为

来自分类Dev

gluPerspective和gluLookAt的奇怪行为

来自分类Dev

ASLR 和 VirtualAlloc 的奇怪行为

来自分类Dev

TextView 和 ListView 的奇怪行为

来自分类Dev

Spring Data MongoDb 的奇怪行为和抽象类上的索引

来自分类Dev

momentjs-奇怪的行为与startOf和endOf

来自分类Dev

Python:和/或运算符奇怪的行为

来自分类Dev

C ++ float和int除法奇怪的行为

来自分类Dev

WordPress的WPDB和MySQL的奇怪的行为

来自分类Dev

CSS中奇怪的反斜杠和行为

来自分类Dev

parseInt和负零在javascript:奇怪的行为?

来自分类Dev

动作编号加和减奇怪的行为

来自分类Dev

StreamReader和EBCDIC的奇怪行为:为什么?

来自分类Dev

奇怪的行为:pcolormesh和meshgrid(简单)