如何保持正确的Javascript事件之后使用cloneNode(真实)

StackOverflow https://stackoverflow.com/questions/29624

题

我有一个形成元素，其中包含多条线路投入。认为每一行为属性的一个新的对象，我想创建在我的网络应用程序。而且，我希望能够创建多个新的对象在一个HTTP员额。我使用的Javascript内cloneNode(true)的方法以克隆的各个线。问题是，每一个输入线也已经一去除的链接连接到其击事件:

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

当克隆输入线的点击链接，它也将删除任何输入输线，这是克隆的同dom对象。是否有可能重新绑定的"这种"反对适当锚标签后使用cloneNode(true)上述DOM元素？

有帮助吗？

解决方案

不要把处理程序每个链接(这真的应该是一个按钮，顺便说一句).使用 事件的起泡 来处理 所有 按钮与一个处理程序：

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>

其他提示

你可以尝试性克隆使用innerHTML的方法，或组合：

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

也：我认为cloneNode不克隆的活动，注册addEventListener.但即是attachEvent事件 都 克隆。但是我可能是错误的。

我测试这在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>

调试这一问题，我会把你的代码

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

在一个功能：

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

这会让你找出是什么$(这个)返回。如果这的确是返回多个对象(多行)，然后你肯定知道哪里可以找到--在代码创造元素使用cloneNode.你做的任何修改所得到的元素(即改变标识属性)?

如果我有个问题你所描述的，我会考虑增加独特的标识，以便触发的元素和"行"的元素。

第一个答案是正确的。

Pornel是隐含地表明大多数跨浏览器和框架的不可知的解决方案。

没有测试过，但这个概念将工作在这些动态情况下，涉及的事件。

看起来像你使用jQuery?它有一个方法以克隆一个元素活动： http://docs.jquery.com/Manipulation/clone#true

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top