有人可以向我解释为什么,当我使用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] 删除。
我来说两句