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

Question

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

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

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

https://stackoverflow.com/

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

当 .fileupload() 被调用时，开始回调的 this 概念似乎被锁定，并且 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(...);
});

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