ダブルクリックでli項目をあるリストから別のリストに移動するにはどうすればいいですか？

Question

ここで私は2つのリストビューを使用していますと、List1をとLIST2を制御し、List1を中のLi項目のダブルクリックでそれ はLIST2に動いているが、私はリスト2に、同じ項目をダブルクリックしたときに、それはここでのList1 に動いていない私のコード

です

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

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

ご提案がありますか？

Answer 1

イベントの委任を使用する必要があります。イベントの委任は、クリックされた要素と、クリックが発生した時点のセレクタ（つまり、要素がどのリストにあるかについての最新の情報）を比較します。

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'); 
}); 

また、あなたはあなたがなどではなく、#list1 li.clicked

Answer 2

は未テスト、イベントハンドラ内でthisを使用したくないですが、私はそれがあると思うので、あなたは、要素を移動するとき、それをそれは拘束力を失います。 .on('event',fuynction(){ ... })（古いjQueryでは.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'); 
}); 

Answer 3

$("#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'); 
      }); 

Answer 4

あなたが第二のリストに移動した項目はまだそれが最初のリストにあったときと同じイベントハンドラを持っていることを意味し、リスト項目のイベントを、結合されています。一度移動されたアイテムをダブルクリックすると、それが既に存在するリストに移動するので、何も起こっていないように見えます。

は、リスト項目のinteadリストにイベントをバインドするdelegate methodを使用します。また

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

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

、あなたはイベントハンドラは、リスト項目が入っているリストするに把握させることができますそのようにイベントハンドラ。リスト項目があるところはどこでも動作しますが、あなたは両方のリストに同じイベントハンドラを使用することができます。

$("#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); 
}); 

Answer 5

問題は、あなたがリストアイテム自体にイベントを結合していることです。それをコンテナから離すと、その効果は失われます。

here's an example.on()を使用します。この方法では、ハンドラを親にバインドします。存在する場合もすぐに配置される子も影響を受けます。私は（） ``生と同じではない上、あなたがそのように使用する場合 `）（`バック

$(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'); 
    }); 

});​ 

Answer 6

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