jQuery：任何方式来“刷新”事件处理程序？

Question

我有两个div，一个拥有一些东西，另一个拥有所有可能的东西。点击其中一个div将传送项目到其他div。我想出的代码是：

$("#holder > *").each(function() { 
    $(this).click(function(e) { 
     $(this).remove(); 
     $("#bucket").append(this); 
    }); 
}); 

$("#bucket > *").each(function() { 
    $(this).click(function(e) { 
     $(this).remove(); 
     $("#holder").append(this); 
     }); 
}); 

这一个完美的作品，除了事件处理程序需要一次我追加或删除元素被刷新。我的意思是，如果我第一次点击一个元素，它会被添加到另一个div，但是如果我再次点击这个元素，什么都不会发生。我可以手动做到这一点，但有没有更好的方法来实现这一目标？

Answer 1

尝试jquery live events .. $ .live（eventname，function）将绑定到任何当前匹配的元素以及未来通过JavaScript操作添加到Dom中的元素。

例如：

$("#holder > *").live("click", function(e) { 
     $(this).remove(); 
     $("#bucket").append(this); 
}); 

$("#bucket > *").live("click", function(e) { 
     $(this).remove(); 
     $("#holder").append(this); 
}); 

重要：

注意$.live已被从jQuery的（1.9以上），并且你应该使用$.on剥离。

我建议你参考this answer了解更新的例子。

Answer 2

你看过jQuery的live函数吗？

Answer 3

编辑：不要使用现场，它被弃用！

利用事件泡沫的优势。使用.on()：

var = function(el1, el2) { 

var things = $('#holder, #bucket'); 
things.each(function(index) { 
    // for every click on or in this element 
    things.eq(index).on('click', '> *', function() { 
    // append will remove the element 
    // Number(!0) => 1, Number(!1) => 0 
    things.eq(Number(!index)).append(this); 
    }); 
}); 

任何点击任何元件（存在于绑定的时间或不）将冒泡（假设你没有手动捕获的事件并停止传播）。因此，您可以使用该绑定仅绑定两个事件，每个容器上一个事件。途经的第二个参数的选择测试（在这种情况下，每一次点击，> *，将删除是元素，然后将其追加到备用容器由things.eq(Number(!index))

Answer 4

在这里，你去当accesesed，使用更直观的delegate API： 。

var holder = $('#holder'), 
    bucket = $('#bucket'); 

holder.delegate('*', 'click', function(e) { 
    $(this).remove(); 
    bucket.append(this); 
}); 

bucket.delegate('*', 'click', function(e) { 
    $(this).remove(); 
    holder.append(this); 
}); 

Answer 5

首先，live已被弃用二，耳目一新的是不是你想要的你只需要点击处理程序附加到右源，在这种情况下：文档

瓦时。你做

$(document).on('click', <id or class of element>, <function>); 

点击处理程序附加到文档。加载页面后，点击处理程序将附加到元素的特定实例。当页面重新加载时，该特定的实例不见了，所以处理程序不会注册任何点击。但页面仍然如此将点击处理程序附加到文档。简单而简单。