如何克隆元素及其相关的事件回调？
如何克隆元素及其相关的事件回调？
提问于 2015-10-26 09:54:01
我正在克隆一个元素并将其添加到DOM中。我预期新创建的克隆元素中的this将引用自身，但它似乎引用了原始的克隆元素。
为了说明，我创建了以下脚本。通过单击"cloneIt"，添加一个新元素，单击新元素时，this引用原始克隆。我的愿望是让data('type')显示“添加”。
如何克隆元素并使回调与新克隆的对象有关？
$('.fileupload').fileupload({
start: function (e, data) {
console.log('start', this, $(this).parent().data('type'));
}
})
.on('fileuploadsubmit', function (e, data) {
console.log('fileuploadsubmit', this, $(this).parent().data('type'));
});
$('#cloneIt').click(function () {
$('#clone').clone(true).removeAttr('id').data('type', 'added').appendTo('#container');
});
#clone {
display:none;
}
<button id="cloneIt">cloneIt</button>
<ul id="container">
<li id="clone" data-type="clone">
<input class="fileupload" name="file" type="file" />
</li>
<li data-type="existing">
<input class="fileupload" name="file" type="file" />
</li>
</ul>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-10-26 11:16:59
看来，在调用this时，start回调的.fileupload()概念被锁定，this被转发到克隆中。
就我个人而言，我会将LI模板与live分开，并且不会在它上调用.fileupload()。
<button id="cloneIt">cloneIt</button>
<ul id="template">
<li data-type="original">
<input class="fileupload" name="file" type="file" />
</li>
</ul>
<ul id="container">
<li data-type="existing">
<input class="fileupload" name="file" type="file" />
</li>
</ul>CSS
#template {
display:none;
}最初，只在.fileupload()中的输入上调用#container，然后在模板的任何克隆之后调用它。
Javascript
$('#container .fileupload').fileupload({
start: function (e, data) {
console.log('start', this, $(this).parent().data('type'));
}
}).on('fileuploadsubmit', function (e, data) {
console.log('fileuploadsubmit', this, $(this).parent().data('type'));
});
$('#cloneIt').click(function () {
$('#template li').clone().data('type', 'clone').appendTo('#container').find('.fileupload').fileupload(...);
});我会推荐这种方法与任何插件。克隆一个广泛化的元素是危险的。克隆行为不能保证是可靠的。有了一些插件，你可能会逃脱它；而对其他插件，你不会。
Stack Overflow用户
发布于 2015-10-26 10:51:59
http://jsfiddle.net/1as47aeb/5/
在创建DOM对象之后，似乎需要再次从库调用fileupload方法。
如果您检查代码中的DOM，您将看到属性存在，并添加了该属性，您可以在克隆后在原始代码中查询它。
编辑
纠正了两个输入事件在复制输入上载时调用的行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33352417
复制
相似问题
自定义javascript确认框
angularjs自定义确认框
自定义警报/确认框
使用TypeScript自定义确认框
自定义确认对话框
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
