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

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

任何点击任何元素（在绑定时是否存在）将冒泡（假设您没有手动捕获事件并停止传播）。因此，您可以使用event delegation仅绑定两个事件，每个容器一个事件。通过第二个参数的选择器测试的每次点击（在这种情况下，> *，将删除那个元素，然后将其附加到things.eq( Number(!index) ) <已加入的备用容器中/ p>

Answer 4

首先，不推荐使用live。其次，提神不是你想要的。您只需将点击处理程序附加到正确的源，在这种情况下：文档。

当你这样做时

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

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

Answer 5

你看过jQuery的live函数吗？

Answer 6

最有效的方式（不要加载所有元素的所有事件）它：

//NORMAL FUNCTION
function myfunction_click(){
   //custom action
}
$('id_or_class_of_element').on('click', myfunction_click);

//LOAD OR REFRESH EVENT
$(document).on('click', 'id_or_class_of_element', myfunction_click);

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

6 个答案: