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(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.

我建议你参考这个答案以获得更新的例子.

Answer 2

首先，live已弃用。其次，刷新不是你想要的。您只需要将点击处理程序附加到正确的来源，在这种情况下：文档。

当你做

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

单击处理程序附加到文档。加载页面时，单击处理程序会附加到元素的特定实例。当页面重新加载时，该特定实例消失了，因此处理程序不会注册任何点击。但是页面仍然存在，因此将单击处理程序附加到文档。简单易行。

Answer 3

在这里,您可以使用更直观的委托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);
});