如何通過雙擊將li項目從一個列表移動到另一個列表？

這裏我使用了兩個listview控件List1和List2，並且在List1中的一個li項目上雙擊它正在移動到List2，但是當我在List2中雙擊同一個項目時它不會移動到List1 這裏是我的代碼如何通過雙擊將li項目從一個列表移動到另一個列表？

$("#list1 li").dblclick(function() { 
$("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
}); 

$("#list2 li").dblclick(function() { 
$("#list2 li.clicked").removeClass("clicked").appendTo('#list1'); 
});

有什麼建議嗎？

來源

2012-03-22 bala3569

您需要使用事件委託，它在單擊被觸發時（即元素所處的列表是最新的），將點擊的元素與選擇器進行比較。

在jQuery 1.7之前，這是使用delegate()完成的，但是從1.7開始，您應該使用on()。

當您直接綁定到元素時，這僅考慮綁定處理程序時元素的狀態，而不考慮當前狀態。

$("#list1").on('dblclick', 'li', function() { 
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
}); 

$("#list2").on('dblclick', 'li', function() { 
    $("#list2 li.clicked").removeClass("clicked").appendTo('#list1'); 
});

此外，你肯定不希望使用this事件處理程序中，而不是#list1 li.clicked等

來源

2012-03-22 10:53:06 Matt

未經檢驗的，但我認爲這是因爲當你移動元素，它失去了約束力。如果您使用.on('event',fuynction(){ ... })（或舊版jQueries中的.live），它應該保持綁定。

$("#list1 li").on('dblclick',function() { 
$("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
}); 

$("#list2 li").on('dblclick',function() { 
$("#list2 li.clicked").removeClass("clicked").appendTo('#list1'); 
});

來源

2012-03-22 10:53:59

'在（）'是不一樣的'活（）'一樣，使用時; '$（document）.on（'dblclick'，'＃list1 li'，function（）{}）'然而。事件綁定也不會丟失;它綁定到元素，所以當你移動元素時，處理器仍然保持連接狀態。 – Matt 2012-03-22 10:58:34

-1

$("#list1 li").dblclick(function() { 
      $("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
      $("#list2 li.clicked").removeClass("clicked").appendTo('#list1'); 
      }); 

     $("#list4 li").dblclick(function() { 
      $("#list2 li.clicked").removeClass("clicked").appendTo('#list1'); 
      $("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
      });

來源

2012-03-22 10:55:44 bala3569

你要綁定的列表項的事件，這意味着你移動到第二列表中的項目仍然具有相同的事件處理程序，當它在第一個列表。雙擊一次移動過的項目會將其移動到已經存在的列表中，因此看起來沒有任何事情發生。這樣

$("#list1").delegate("li", "dblclick", function() { 
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
}); 

$("#list2").delegate("li", "dblclick", function() { 
    $("#list2 li.clicked").removeClass("clicked").appendTo('#list1'); 
});

或者，您可以讓事件處理程序，找出哪些列出清單項目是在事件處理程序：

使用delegate method將事件綁定到列表這一翻譯的列表項。只要工作列表項是，你可以使用相同的事件處理程序兩個列表：

$("#list1 li, #list2 li").dblclick(function() { 
    var source = $(this).closest('ul'); 
    var target = source.attr('id') == "list1" ? $("#list2") : $("#list1"); 
    $("li.clicked", source).removeClass("clicked").appendTo(target); 
});

來源

2012-03-22 10:55:49 Guffa

的問題是，你要綁定的事件列表項目本身。將它從容器中移開，會失去效果。使用.on()。這樣，您就可以將處理程序綁定到父項，並且任何現有的或即將放置的子項都將受到影響。我扯下了removeclass，您可以添加回

$(function() { 

    //any "li", existing or soon to be, that is "double-clicked" in "list1", move to list2 

    $("#list1").on('dblclick','li',function() { 
     $(this).appendTo('#list2'); 
    }); 

    //any "li", existing or soon to be, that is "double-clicked" in "list2", move to list1 

    $("#list2").on('dblclick','li',function() { 
     $(this).appendTo('#list1'); 
    }); 

});

來源

2012-03-22 10:57:23 Joseph

$("#list1").on('dblclick', 'li', function() { 
    $(this).remove().appendTo('#list2'); 
});

來源

2017-11-12 15:41:51

如何通過雙擊將li項目從一個列表移動到另一個列表？

回答

相關問題