CODEWITHSUNDEEP
jqueryjquery-ui
Sushil
Sushil

Reputation: 1288

dynamically create sortable list and perform action on click

I am dynamically creating a sortable list. However the .on('dblclick') action is not working for the newly created list items. It only works for the static list. 

$( "#sortable" ).sortable( "refresh" );

refresh also doesnot seems to work.
Here's my full code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script>
     $(document).ready(function () {
        $(function() {
            $( "#sortable" ).sortable();
            $( "#sortable" ).disableSelection();
        });
        var i = 10;
        $(window).load(function(){
            $('#btn_createList').click(function() {    
                $('.ul_current').append('<li id="foo_' + i + '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + i);
                i++;
            $( "#sortable" ).sortable( "refresh" );
            });
        }); 
        $("#sortable li").on('dblclick',function(){
            alert($(this).attr('id'));
        });
}); 
    </script>

</head>
<body>

 <ul id="sortable" class="ul_current">
    <li id="foo_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li id="foo_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li id="foo_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>

</ul>

 <button id="btn_createList">add</button>

</body>
</html>

Thanks in advance

Upvotes: 0

Views: 5284

Answers (2)

PSL
PSL

Reputation: 123739

Use event delegation to have the event bound for the dynamically created lis

   $("#sortable").on('dblclick','li', function(){
        alert($(this).attr('id'));
    });

Fiddle

Or the same way you are doing $( "#sortable" ).sortable( "refresh" ); after the element has been added, bind the event for the added element like this:

$('#btn_createList').click(function () {

         var $li = $('<li/>', {
             id: 'foo_' + i,
                 'class': 'ui-state-default'
         }).on('dblclick', handleDblClick).append($('<span/>', {
             'class': 'ui-icon ui-icon-arrowthick-2-n-s'
         })).append(i);

         $('.ul_current').append($li);
         i++;
         $("#sortable").sortable("refresh");
     });

     $("#sortable li").on('dblclick', handleDblClick);

Fiddle

Upvotes: 2

Jonny Sooter
Jonny Sooter

Reputation: 2417

Your problem is you're attaching an event to an element that isn't ready to receive that event. You should attach the event to a parent element, then you can filter for #sortable li. This way it doesn't matter when your click able element gets added, it will work. This is called event delegation. You're delegating the task of handling the event to another element.

And your JS:

$("#sortable").on("dbclick", "li", function() {
    alert('it works!');
});

Also when doing this, don't attach it to a parent that's too high up the tree. You want to attach it to the nearest possible parent element (in this case #sortable). We don't need to have a click event on something like document because it's a good idea to be specific of which elements will get this event. Attaching it to document will mean that any element, that has li, will be click able and respond to the same code. If you want to have different functionality in different buttons, you can't, because they're all responding to the same code attached to document.

Upvotes: 2

Related Questions