提问人：newtonapple 提问时间：8/27/2008 最后编辑：Rob Wnewtonapple 更新时间：12/29/2011 访问量：8823
如何使用 cloneNode（true） 后维护正确的 Javascript 事件
How to Maintain Correct Javascript Event After Using cloneNode(true)
问：
我有一个包含多行输入的表单元素。将每一行视为要在 Web 应用程序中创建的新对象的属性。而且，我希望能够在一个 HTTP POST 中创建多个新对象。我正在使用 Javascript 的内置 cloneNode（true） 方法来克隆每一行。问题在于，每个输入行还附加了一个附加到其 onclick-event 的删除链接：
// prototype based
<div class="input-line">
<input .../>
<a href="#" onclick="$(this).up().remove();"> Remove </a>
</div>
单击克隆的输入行的删除链接时，它还会删除从同一 dom 对象克隆的任何输入行。在上面的 DOM 元素上使用 cloneNode（true） 后，是否可以将“this”对象重新绑定到正确的锚标记？
答：
-1赞
Fredrik Kalseth
8/27/2008
#1
看起来您正在使用 jQuery？它有一个克隆带有事件的元素的方法：http://docs.jquery.com/Manipulation/clone#true
编辑：哎呀，我看到你正在使用原型。
0赞
doekman
8/28/2008
#2
您可以尝试使用 innerHTML 方法进行克隆，或者混合使用：
var newItem = $(item).cloneNode(false);
newItem.innerHTML = $(item).innerHTML;
另外：我认为 cloneNode 不会克隆使用 addEventListener 注册的事件。但是 IE 的 attachEvent 事件是克隆的。但我可能错了。
0赞
Greg
10/4/2008
#3
我在 IE7 和 FF3 中对此进行了测试，它按预期工作 - 一定还有其他事情发生。
这是我的测试脚本：
<div id="x">
<div class="input-line" id="y">
<input type="text">
<a href="#" onclick="$(this).up().remove();"> Remove </a>
</div>
</div>
<script>
$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));
</script>
0赞
J5.
10/7/2008
#4
为了调试这个问题，我会包装你的代码
$(this).up().remove()在函数中：
function _debugRemoveInputLine(this) {
debugger;
$(this).up().remove();
}这将使您能够找出 $（this） 返回的内容。如果它确实返回多个对象（多行），那么你肯定知道在哪里查找 - 在使用 cloneNode 创建元素的代码中。您是否对生成的元素进行任何修改（即更改 id 属性）？
如果我遇到您描述的问题，我会考虑将唯一 ID 添加到触发元素和“行”元素。
7赞
Kornel
10/12/2008
#5
不要在每个链接上放置处理程序（顺便说一句，这真的应该是一个按钮）。使用事件冒泡通过一个处理程序处理所有按钮：
formObject.onclick = function(e)
{
e=e||event; // IE sucks
var target = e.target||e.srcElement; // and sucks again
// target is the element that has been clicked
if (target && target.className=='remove')
{
target.parentNode.parentNode.removeChild(target.parentNode);
return false; // stop event from bubbling elsewhere
}
}
+
<div>
<input…>
<button type=button class=remove>Remove without JS handler!</button>
</div>
0赞
Diego Perini
10/19/2008
#6
第一个答案是正确的。
Pornel 隐含地提出了与浏览器和框架无关的解决方案。
尚未对其进行测试，但该概念将在这些涉及事件的动态情况下起作用。
上一个：打印 DOM 更改
评论