jQuery UI sortable click event

Question

I have 2 list that are sortable (#sortable1 and #sortable2) and I made 2 click() functions to handle each sortable item click event ($("#sortable1 li").click(function(){}) and $("#sortable2 li").click(function(){})).

I move 1 item from #sortable1 (for ex: Sort1 Item 2) list to #sortable2 list. The problem is when the item has moved to the #sortable2 and I try to click it, the triggered mouseevent is $("#sortable1 li").click(function(){}) not $("#sortable2 li").click(function(){}).

Any suggestion so if I move item from sortable1 to sortable2 and click that item, the item trigger $("#sortable2 li").click(function(){})?

DEMO: http://jsfiddle.net/yosafatade/zX3pX/12/

Answer 1

you need to use on() see the update http://jsfiddle.net/zX3pX/13/

Answer 2

I would use .on as .delegate has been superseded. That way you attach the event to the list not the list item.

Use this:

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

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

fiddle: http://jsfiddle.net/qkCcS/