在jquery中使用新的id和事件处理程序克隆div

Question

我有一个div，我希望在页面的某处添加div的新副本，但是需要新的ID和新的事件处理程序。新ID可以采用“原始id + _cloned”的形式。我能够提供新的ID，但我希望原始div中存在的所有事件处理程序都附加到映射到新ID的新div。有没有办法用jQuery做到这一点？

Answer 1

如果查看.clone()函数的jQuery文档，您将看到有两个可选参数包含元素本身的数据和事件处理程序以及克隆时的元素后代。

这将处理保留事件处理程序（只要它们直接绑定到该元素，而不是委托），那么您只需要修改结果元素的id属性。以下应该做你需要的：

$('#myid').clone(true).prop('id', function(i, oldId) {
    return oldId + '_cloned';
});

Answer 2

.clone(true);

这样事件处理程序应该与元素一起复制

Answer 3

您可以使用.clone( [withDataAndEvents] [, deepWithDataAndEvents]复制事件处理程序和数据..

但是，我怀疑受ID限制的委托事件是否仍然适用于克隆元素。

示例： http://jsfiddle.net/Sfrm9/

$(document).on('click'. '#someId', function () { }); - 克隆#someId并将其更改为#someId_cloned

后无效

正如mcpDESIGNS提到的here，您应该将其映射为使用class而不是委托处理程序的id，然后您的克隆应该可以正常工作。

<强>实施例

<div id="#someId" class="someClass" >Test</div>

<强> JS：

$(document).on('click'. '.someClass', function () { });

而不是

$(document).on('click'. '#someId', function () { });

Answer 4

您可以使用div的类来绑定事件。然后，您可以将同一个班级留给您响应该事件所需的所有div。

如果您的事件使用ID选择器进行绑定，则它将无法在您的新div上运行，因为您必须更改其ID，但它应该适用于类。