Javascript `$（）.clone（true）`在chrome扩展中中断事件处理程序（在jsbin上工作）_Javascript_Jquery_Google Chrome Extension_Event Handling_Clone

Javascript `$（）.clone（true）`在chrome扩展中中断事件处理程序（在jsbin上工作）

javascript jquery google-chrome-extension

Javascript `$（）.clone（true）`在chrome扩展中中断事件处理程序（在jsbin上工作）,javascript,jquery,google-chrome-extension,event-handling,clone,Javascript,Jquery,Google Chrome Extension,Event Handling,Clone,我正在开发一个chrome扩展，它可能会改变数千个DOM元素。出于性能方面的考虑，我希望在内存中执行此操作，而不是反复接触DOM。正如您在下面的代码片段中所看到的，这一点非常有用 $（文档）.ready（函数（）{ $（“#单击我”）。在（“单击”、（）=>{ $（“#单击计数”）.html（（idx，num）=>++num） }) $（“#带克隆”）。单击（函数（）{ 使用克隆（$elem）=>{ $elem.find（“h1”）.text（“通过克隆更改（仍然有效）”） }) }) $（“

我正在开发一个chrome扩展，它可能会改变数千个DOM元素。出于性能方面的考虑，我希望在内存中执行此操作，而不是反复接触DOM。正如您在下面的代码片段中所看到的，这一点非常有用

$（文档）.ready（函数（）{
$（“#单击我”）。在（“单击”、（）=>{
$（“#单击计数”）.html（（idx，num）=>++num）
})
$（“#带克隆”）。单击（函数（）{
使用克隆（$elem）=>{
$elem.find（“h1”）.text（“通过克隆更改（仍然有效）”）
})
})
$（“#无克隆”）。单击（函数（）{
不进行克隆（$elem）=>{
$elem.find（“h1”）.text（“未经克隆而更改（仍有效）”）
})
})
})
具有克隆功能（mutateDom）{
变量$elem=$（“主体”）
//'true'参数保留绑定
var$clone=$elem.clone（true）
变异（克隆）
$elem.replaceWith（$cloned）
}
不带克隆的函数（mutateDom）{
突变域（$（“主体”））
}


JS-Bin
点击我！
单击计数：0
替换而不克隆
以克隆取代

您正在执行的操作可能会中断事件处理程序。不能使用jQuery方法克隆或替换事件处理程序（由jQuery方法添加的事件除外）。因此，用克隆副本替换DOM的内容将导致删除事件处理程序

jQuery

.clone（）

无法克隆非jQuery事件当没有通过jQuery方法添加事件侦听器时，jQuery无法知道元素上有哪些事件。因此，通过普通DOM方法（即

.addEventListener（）

）添加的任何事件都不会被jQuery的

.clone（）

克隆

下面是一个使用

addEventListener（）

添加计数事件处理程序的示例。您可以看到jQuery

.clone（）

不会克隆它，但会克隆jQuery事件（还包括）：

$（文档）.ready（函数（）{
document.querySelector（“单击我”）.addEventListener（“单击”，（）=>{
$（“#单击计数”）.html（（idx，num）=>++num）
})
$（“#带克隆”）。单击（函数（）{
使用克隆（$elem）=>{
$elem.find（“h1”）.text（“随着克隆而更改（计数无效）”）
})
})
$（“#无克隆”）。单击（函数（）{
不进行克隆（$elem）=>{
$elem.find（“h1”）.text（“未经克隆而更改（仍有效）”）
})
})
})
具有克隆功能（mutateDom）{
变量$elem=$（“主体”）
//'true'参数保留绑定
var$clone=$elem.clone（true）
变异（克隆）
$elem.replaceWith（$cloned）
}
不带克隆的函数（mutateDom）{
突变域（$（“主体”））
}


JS-Bin
点击我！
单击计数：0
替换而不克隆
以克隆取代