如何克隆元素及其关联的事件回调？

Question

我正在克隆一个元素并将其添加到 DOM。我原以为新创建的克隆元素中的 this 会引用自身，但它似乎引用了原始克隆元素。

为了说明，我创建了以下脚本。通过单击 "cloneIt"，添加一个新元素，单击新元素后，this 引用原始克隆。我的愿望是 data('type') 显示 "added"。

如何克隆元素并使回调与新克隆的对象相关？

$('.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>

Answer 1

http://jsfiddle.net/1as47aeb/5/

似乎您需要在创建 DOM 对象后再次从库中调用 fileupload 方法。

如果您检查代码中的 DOM，您会看到该属性已添加，您可以在克隆后在原始代码中查询它。

编辑

更正了在克隆输入中上传时调用两个输入事件的行为。

Answer 2

似乎启动回调的 this 概念在调用 .fileupload() 时被锁定，并且 this 被传递给克隆。

就我个人而言，我会将模板 LI 与实时 LI 分开，并且永远不会在其上调用 .fileupload()。

HTML

<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;
}

最初，仅在 #container 中的 INPUT 上调用 .fileupload()，随后在创建模板后对模板的任何克隆调用。

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(...);
});

我会推荐使用 any 插件的这种方法。克隆一个小部件元素是危险的。不保证克隆行为是可靠的。使用某些插件，您可能会侥幸逃脱；和其他人在一起，你不会。

如何克隆元素及其关联的事件回调？

How to clone elements and their associated event callbacks?

javascript

jquery

dom

clone