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/

Awais Qarni · Accepted Answer · 2018-02-20 12:49:01Z

3

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

edited Feb 20, 2018 at 12:49

Awais Qarni

18k25 gold badges81 silver badges145 bronze badges

answered Oct 18, 2012 at 16:27

David Michael Harrison

3742 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oshikryu Over a year ago

live() is deprecated - use .on()

Roy Shoa Over a year ago

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. stackoverflow.com/questions/947195/…

Jon Wells · Accepted Answer · 2012-10-18 16:35:54Z

3

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/

answered Oct 18, 2012 at 16:35

Jon Wells

4,2709 gold badges42 silver badges69 bronze badges

Comments

Bryan Williams · Accepted Answer · 2012-10-18 16:31:55Z

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, 2012 at 16:31

Bryan Williams

6931 gold badge11 silver badges27 bronze badges

1 Comment

yosafatade Over a year ago

I've tried that way before, but the problem still occurs. the answer from @DavidMichaelHarrison and CrimsonChin is the appropriate answer.

Collectives™ on Stack Overflow

jQuery UI sortable click event

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related