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/

score 3 · Accepted Answer · edited Feb 20 '18 at 12:49

3

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

edited Feb 20 '18 at 12:49

Awais Qarni

17,492
24
75
137

answered Oct 18 '12 at 16:27

David Michael Harrison

374
2
11

2

live() is deprecated - use .on() – oshikryu May 30 '13 at 21:13
If you have clickable items in the Sortable, also add the options `helper : 'clone',` on the Sortable Options to prevent fire the click event on dragging/sorting. http://stackoverflow.com/questions/947195/jquery-ui-sortable-how-can-i-cancel-the-click-event-on-an-item-thats-dragged – Roy Shoa Aug 17 '16 at 08:30

score 3 · Answer 2 · answered Oct 18 '12 at 16:35

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/

score 0 · Answer 3 · answered Oct 18 '12 at 16:31

0

I would probably add a class to each li item of what table it is in. For instance

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

Then when you check .click on $(".sort1") and when you move the item run

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

answered Oct 18 '12 at 16:31

Bryan Williams

693
1
10
27

I've tried that way before, but the problem still occurs. the answer from @DavidMichaelHarrison and CrimsonChin is the appropriate answer. – yosafatade Oct 18 '12 at 16:45

jQuery UI sortable click event

3 Answers3