Question

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

$('#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（）函数？

Answer 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'));

Answer 2

我认为你需要的是：

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

请参阅： http://jsfiddle.net/thirtydot/jHSwY/

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

Answer 3

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

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

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

Answer 4

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

http://www.tylergerard.com

使用jQuery交换两个div，同时保持绑定的事件处理程序

4 个答案: