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

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

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

Answer 2

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

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

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

编辑

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