javascript - 使用 cloneNode(true) 后如何维护正确的 Javascript 事件

Question

我有一个包含多行输入的表单元素。将每一行视为我想在我的 Web 应用程序中创建的新对象的属性。而且，我希望能够在一个 HTTP POST 中创建多个新对象。我正在使用 Javascript 的内置 cloneNode(true) 方法来克隆每一行。问题是每个输入行还有一个附加到其 onclick 事件的删除链接：

// prototype based
<div class="input-line">
    <input .../>
    <a href="#" onclick="$(this).up().remove();"> Remove </a>
</div>

单击克隆的输入行的删除链接时，它还会删除从同一 dom 对象克隆的任何输入行。在上述 DOM 元素上使用 cloneNode(true) 后，是否可以将“this”对象重新绑定到正确的锚标记？

Answer 1

不要将处理程序放在每个链接上（这真的应该是一个按钮，顺便说一句）。使用事件冒泡通过一个处理程序处理所有按钮：

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…&gt;
  <button type=button class=remove>Remove without JS handler!</button>
</div>

Answer 2

您可以尝试使用 innerHTML 方法进行克隆，或者混合使用：

var newItem = $(item).cloneNode(false);
newItem.innerHTML = $(item).innerHTML;

另外：我认为 cloneNode 不会克隆事件，并在 addEventListener 中注册。但是 IE 的 attachEvent 事件被克隆了。但我可能错了。

Answer 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>

Answer 4

为了调试这个问题，我会包装你的代码

$(this).up().remove()

在一个函数中：

function _debugRemoveInputLine(this) {
    debugger;
    $(this).up().remove();
}

这将允许您找出 $(this) 返回的内容。如果它确实返回了多个对象（多行），那么您肯定知道在哪里查找 - 在使用 cloneNode 创建元素的代码中。您是否对结果元素进行任何修改（即更改 id 属性）？

如果我遇到了您描述的问题，我会考虑将唯一 ID 添加到触发元素和“行”元素。

Answer 5

第一个答案是正确的。

Pornel 暗示了最跨浏览器和框架无关的解决方案。

尚未对其进行测试，但该概念将适用于这些涉及事件的动态情况。

Answer 6

看起来你正在使用 jQuery？它有一种克隆带有事件的元素的方法：http: //docs.jquery.com/Manipulation/clone#true

编辑：哎呀，我看到你正在使用原型。