用 jQuery 交换两个 div，同时维护绑定的事件处理程序答案

【问题标题】：Swapping two divs with jQuery while maintaining bound event handlers用 jQuery 交换两个 div，同时维护绑定的事件处理程序
【发布时间】：2012-05-10 23:59:35
【问题描述】：

我有两个 div，#content 和 #contentSwap。我正在将一些数据加载到#contentSwap，对其执行一些操作，然后将其与#content 交换。我正在使用 html() 函数来交换两者，但我刚刚意识到这导致了一个问题：我使用 click() 分配给 #contentSwap 中的锚点的函数丢失了。下面是代码示例：

$('#contentSwap').html(data);

$('#contentSwap a').each(function(){
 $(this).click(function(){
  // Do whatever
 });
});

$('#content').html($('#contentSwap').html());
$('#contentSwap').html("");

使用 click() 分配的函数在此之后在 #content 中不起作用。

但是，如果我使用 attr() 函数来修改每个 div 的 id，那么 click() 函数会继续存在。但这并非每次都有效，并且会导致各种错误，包括 #content 和 #contentSwap 的多个副本等。这是代码：

$('#content').attr("id", "contentSwap1");
$('#contentSwap').attr("id", "content");
$('#contentSwap1').attr("id", "contentSwap");
$('#contentSwap').html("");

如何有效地交换 #content 和 #contentSwap 而不会丢失我分配给它的 click() 函数？

【问题讨论】：

标签： jquery html swap attr

【解决方案1】：

不确定您要做什么，但分配给#contentSwap 的点击处理程序不会突然开始为#content 工作。

如果您以后不使用 #contentSwap 元素做其他事情，您可以将整个元素移动到 #content 中，并使用委托事件处理程序来确保它可以正常工作，例如：

$('#contentSwap').html(data);

$('#contentSwap a').each(function(){
   $(document).on('click', this, function(){
       //document should be replace with nearest non dynamic parent
       //do your thing
   });
});

$('#content').empty().append($('#contentSwap'));

【讨论】：

想出了这个！我提供的第二个代码块工作正常，但#contentSwap div 与#content div 不在同一个地方。我把它移到了正确的空间，现在效果很好。
我猜你是 MooTools 开发者:)
@gdoron - 这到底有什么帮助？

【解决方案2】：

我认为你需要的是：

$('#contentSwap').contents().appendTo('#content');

见：http://jsfiddle.net/thirtydot/jHSwY/

.contents() 用于获取#contentSwap 的每个子节点（包括文本节点）。然后使用.appendTo() 将孩子移动到#content 中（参见包含“它将被移动到目标中”的句子）。

【讨论】：

这可能也可以，但我已经明白了。很好的提示。

【解决方案3】：

这称为事件委托。基本上，您正在以编程/动态方式生成该内容，因此默认事件绑定不再有效。 .live 已弃用，但您可以使用：

 $(#contentSwap a).on("click", function(){
  // Do whatever
 });

另外，each 函数似乎没有做任何事情，我很确定你可以跳过它。

【讨论】：

【解决方案4】：

想出了这个！我提供的第二个代码块工作正常，但#contentSwap div 与#content div 不在同一个地方。我把它移到了正确的空间，结果一切都很好。

http://www.tylergerard.com

【讨论】：