1

我有两个 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() 函数？

4

4 回答 4

1

我认为你需要的是：

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

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

.contents()用于获取#contentSwap. 然后孩子们被移动到里面#content，使用.appendTo()（参见包含“它将被移动到目标中”的句子）。

于 2012-05-11T00:34:48.387 回答
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'));
于 2012-05-11T00:13:53.713 回答
0

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

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

此外，该each功能似乎没有做任何事情，我很确定您可以跳过它。

于 2012-05-11T00:23:40.337 回答
0

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

http://www.tylergerard.com

于 2012-05-11T14:05:38.163 回答