JQuery .click() does not work in new sortable item

Question

I have JQuery UI Sortable+Draggable lists, and i use JQuery .click() for all sortable items, but if i drop new item from draggable list to sortable list, this item do not trigger .click() event.

$(#sortable li).click(function(){
    alert('Sortable item clicked');
});

https://jsfiddle.net/1so55b0t/2/

Why?

Okay, i'm replace .click() to .on('click')

And my elements have close button with class .remove and again this does not work for new elements:

$('#sortable li').on('click','.remove',function(){
    $(this).parent().remove();
});

https://jsfiddle.net/1so55b0t/4/ Why?

Your jsfiddle sample seems to work.. Are you sure that you enclosed your #sortable li as a string? $("#sortable li") — JimboSlice, Aug 18 '16 at 05:20
Oh GOD... this question have been asked trillion times here on SO, why dont you search a bit — KAD, Aug 18 '16 at 05:21

Bhushan Kawadkar · Accepted Answer · 2016-08-18T06:09:48.313

4

Try this : As you are moving the lis within DOM, it will not applied to previously bind click event handler. Better use click event delegation, which is useful for dynamic / new elements like below

$('#sortable').on('click', 'li', function(){
    alert('Sortable item clicked');
});

EDIT - Use below code to add click handler for remove buttons -

$('#sortable').on('click','li .remove',function(e) {
    e.stopPropagation();
    $(this).parent().remove();
});

JSFiddle Demo

edited Aug 18 '16 at 06:09

answered Aug 18 '16 at 05:19

Bhushan Kawadkar

28,279
5
35
57

this work, but this not work: $('#sortable li').on('click', '.remove', function(){ $(this).parent().remove(); }); – PlayerKillerYKT Aug 18 '16 at 05:28
what is `.remove` button, can you pls post jsfiddle with close button – Bhushan Kawadkar Aug 18 '16 at 05:49
https://jsfiddle.net/1so55b0t/4/ – PlayerKillerYKT Aug 18 '16 at 05:51
please check my edit in the answer, - https://jsfiddle.net/1so55b0t/5/ – Bhushan Kawadkar Aug 18 '16 at 05:56
thanks this work, but how i can click del button(remove), without trigger element click? – PlayerKillerYKT Aug 18 '16 at 06:04
You can use ` e.stopPropagation();`, see this https://jsfiddle.net/1so55b0t/6/ – Bhushan Kawadkar Aug 18 '16 at 06:08

score 0 · Answer 2 · answered Aug 18 '16 at 05:18

0

Because you need to append click handler to the newly added elements too. Change you code to as below. Check demo - https://jsfiddle.net/1so55b0t/3/.

$('#sortable').on('click', 'li', function() {
    alert('Sortable item Clicked!');
 });

answered Aug 18 '16 at 05:18

Nikolay Ermakov

5,031
2
11
18

score 0 · Answer 3 · answered Aug 18 '16 at 05:22

0

you may use this code

 $(document).on('click', '#sortable li', function () {
 
     alert('Sortable item Clicked!');
     });

answered Aug 18 '16 at 05:22

Manu Padmanabhan

555
1
4
16

explain it please – Pratik Joshi Jan 13 '19 at 19:06

JQuery .click() does not work in new sortable item

3 Answers3