Javascript jQuery：有什么方法可以“刷新”事件处理程序？

jQuery: Any way to "refresh" event handlers?

提问by Legend

I have two divs, one that holds some stuff and the other with all possible stuff. Clicking on one of the divs will transfer items to the other div. The code I came up with is:

我有两个 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);
        });
});

This one works perfectly, except that the event handlers need to be refreshed once I append or remove elements. What I mean is, if I first click on an element, it gets added to the other div, but if I click on this element again, nothing happens. I can do this manually but is there a better way to achieve this?

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

回答by John Hartsock

Try jquery live events.. the $.live(eventname, function) will bind to any current elements that match as well as elements added to the Dom in the future by javascript manipulation.

尝试jquery live events.. $.live(eventname, function) 将绑定到任何当前匹配的元素以及将来通过 javascript 操作添加到 Dom 的元素。

example:

例子：

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

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

Important:

重要的：

Note that $.livehas since been stripped from jQuery (1.9 onwards) and that you should instead use $.on.

请注意，$.live它已从 jQuery（1.9 及更高版本）中删除，您应该改为使用$.on.

I suggest that you refer to this answerfor an updated example.

我建议您参考此答案以获取更新的示例。

回答by James

Here you go, using the more intuitive delegate API:

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

回答by craned

First, liveis deprecated. Second, refreshing isn't what you want. You just need to attach the click handler to the right source, in this case: the document.

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

When you do

当你做

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

the click handler is attached to the document. When the page is loaded, the click handler is attached to a specific instance of an element. When the page is reloaded, that specific instance is gone so the handler isn't going to register any clicks. But the page remains so attach the click handler to the document. Simple and easy.

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

回答by Dan Heberden

EDIT: don't use live, it be deprecated!

编辑：不要使用 live，它会被弃用！

Take advantage of the fact that events bubble. Using .on():

利用事件冒泡的事实。使用.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 );
  });
});

anyclick on anyelement (existing at the time of bind or not) will bubble up (assuming you haven't manually captured the event and stopped propagation). Thus, you can use that event delegationto bind only two events, one on each container. Every click that passed the selector test of the 2nd argument (in this case, > *, will remove thatelement and then append it to the alternate container as accesesed by things.eq( Number(!index) )

对任何元素（在绑定时存在与否）的任何点击都会冒泡（假设您没有手动捕获事件并停止传播）。因此，您可以使用event delegation它只绑定两个事件，每个容器一个。通过第二个参数的选择器测试的每次点击（在本例中，> *, 将删除该元素，然后将其附加到由things.eq( Number(!index) )

回答by Marek Karbarz

Have you looked at jQuery's livefunction?

你看过jQuery的live功能吗？