jQuery sortable - Bind new on('dblclick') to cloned element

Question

I have connected lists using jQuery sortable().

The lists are initialized with

$( "#held, #notheld" ).sortable({
      connectWith: ".connectedSortable",
    }).disableSelection();

When the page loads I also bind dblclick

$('#held li').on('dblclick', function() {
    var litem = $(this).clone();
    litem.appendTo($('#notheld'));
    $(this).remove();
    update_holding(litem.attr('id'), 'remove');
    $( "#held, #notheld" ).sortable( "refresh" );
});
$('#notheld li').on('dblclick', function() {
    var litem = $(this).clone();
    litem.appendTo($('#held'));
    $(this).remove();
    update_holding(litem.attr('id'), 'add');
    $( "#held, #notheld" ).sortable( "refresh" );
});

Once the cloned LI is appended to the other list it needs to have the correct .on('dblclick') function bound. If I clone with true boolean as an arg the bindings get copied but I do not want the original function but rather the one associated with the list to which it now belongs.

The elements can still be dragged to new list without error.

I have tried adding the binding function to the activate, change, and update events in the initializing call in the hope that refresh() would see new element and do the .on() assignment but these were ineffective.

I also tried re-writing the initial bindings like so

 $('#notheld li').on('dblclick', function() {
        var litem = $(this).clone();
        litem.appendTo($('#held'));
        $(this).remove();
        update_holding(litem.attr('id'), 'add');
        litem.on('dblclick', function() {
            var litem2 = $(this).clone();
            litem2.appendTo($('#notheld'));
            $(this).remove();
            update_holding(litem2.attr('id'), 'remove');
        });
      });

But this does not call the function correctly? Perhaps the use of $(this) is not correct?

The update_holding() function should not bear on the issue as it is just an ajax post to another script managing the database updates.

Here is a working example: https://jsfiddle.net/qn6v42c9/

Also read jQuery clone() not cloning event bindings, even with on() and
jquery .on() doesn't work for cloned element

Answer 1

I would use click event delegation on sortable container itself so I would not have to bind the dbclick again and again, here is the code for it

$("#held, #notheld").sortable({
    connectWith: ".connectedSortable",
}).disableSelection();

$('#held').on('dblclick', 'li', function() {
    var litem = $(this).clone();
    litem.appendTo($('#notheld'));
    $(this).remove();
    update_holding(litem.attr('id'), 'remove');
    $("#held, #notheld").sortable("refresh");
});

$('#notheld').on('dblclick', 'li', function() {
    var litem = $(this).clone();
    litem.appendTo($('#held'));
    $(this).remove();
    update_holding(litem.attr('id'), 'add');
    $("#held, #notheld").sortable("refresh");
});



// dropped
$('#held').on('sortreceive', function(event, ui) {
    update_holding(ui.item.attr('id'), 'add');
});


// dropped
$('#notheld').on('sortreceive', function(event, ui) {
    update_holding(ui.item.attr('id'), 'remove');
});

function update_holding(EntityNumber, action) {
    // ajax here
}

#held, #notheld {
    border: 1px solid #eee;
    width: 272px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }

  #held li, #notheld li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 250px;
 cursor:move;
  }

  
  #notheld li {
    float: left;
    clear: none;
    display: inline-block;
 }
 
 div#notheld-container, div#held-container {
  width: 300px;
    float:left;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div id="notheld-container">
<h3>Properties Not Held by <em>Client</em></h3>
<ul id="notheld" class="connectedSortable"> 
 
</ul>
</div>
<div id="held-container">
<h3>Current Holdings</h3>
<ul id="held" class="connectedSortable ui-sortable"> 

<li class="ui-state-highlight ui-sortable-handle" id="12">Farragut (12)</li><li class="ui-state-highlight ui-sortable-handle" id="1010" style="">King Street (1010)</li>
<li class="ui-state-highlight ui-sortable-handle" id="07">Annandale (07)</li>
<li class="ui-state-highlight ui-sortable-handle" id="13">Aquahart (13)</li>
</ul>
</div>