2012-10-18 33 views
5

ソート可能な2つのリスト(#sortable1と#sortable2)があり、ソート可能なアイテムのクリックイベント($("#sortable1 li").click(function(){})$("#sortable2 li").click(function(){}))を処理する2つのclick()関数を作成しました。jQuery UIのソート可能なクリックイベント

#sortable1(例:Sort1 Item 2)リストから#sortable2リストに1アイテム移動します。問題はアイテムが#sortable2に移動してクリックしようとしたときです。トリガーされたmouseeventは$("#sortable1 li").click(function(){})ではなく$("#sortable2 li").click(function(){})です。

私はアイテムをsortable1からsortable2に移動してそのアイテムをクリックすると、アイテムトリガー$("#sortable2 li").click(function(){})が表示されますか?

DEMOhttp://jsfiddle.net/yosafatade/zX3pX/12/

答えて

3

あなたがon()を使用する必要がhttp://jsfiddle.net/zX3pX/13/

+0

スーパー素晴らしい

はこれを使用してください。あなたに1000のおかげで。 – yosafatade

+2

live()は廃止されました - .on()を使用します。 – oshikryu

+0

ソート可能なアイテムがある場合は、ソート可能なオプションに 'helper: 'clone'、'オプションを追加して、ドラッグ/ソート時にclickイベントを発生させないようにします。 http://stackoverflow.com/questions/947195/jquery-ui-sortable-how-can-i-cancel-the-click-event-on-an-item-thats-dragged –

0

更新を参照してください私はおそらくそれがであるもの、テーブルの各li項目にクラスを追加します。例えば

<li class='sort1'></li> 

.click$(".sort1")にチェックし、アイテムを移動したとき

$(this).removeClass("sort1"); 
$(this).addClass("sort2"); 
+0

私は以前にその方法を試みましたが、それでも問題は発生します。 @DavidMichaelHarrisonとCrimsonChinの回答が適切な答えです。 – yosafatade

2

.onは、.delegateが置き換えられました。そうすれば、リストアイテムではなく、リストにイベントをアタッチすることができます。

$("#sortable1").on("click", "li", function(){ 
     $("#testClickSort1").html($(this).html()); 
}); 

$("#sortable2").on("click", "li", function(){ 
     $("#testClickSort2").html($(this).html()); 
}); 

フィドル:http://jsfiddle.net/qkCcS/

関連する問題