Question

我已经使用jQuery sortable（）连接了列表。

列表初始化为

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

页面加载后，我还会绑定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" );
});

将克隆的LI附加到其他列表后，它需要绑定 correct .on（'dblclick'）函数。如果我使用true boolean作为arg进行克隆，则绑定将被复制，但我不希望使用原始函数，而是要使用与它现在所属的列表相关联的函数。

仍然可以将元素拖动到新列表，而不会出现错误。

我尝试在初始化调用中将绑定函数添加到Activate，Change和Update事件中，希望refresh（）会看到新元素并执行.on（）分配，但这些方法无效。

我也尝试过像这样重写初始绑定

 $('#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');
        });
      });

但这不能正确调用该函数吗？也许$（this）的使用不正确？

update_holding（）函数不应该涉及这个问题，因为它只是到另一个管理数据库更新的脚本的ajax发布。

这是一个有效的示例：https://jsfiddle.net/qn6v42c9/

也阅读 jQuery clone() not cloning event bindings, even with on()和
jquery .on() doesn't work for cloned element

Answer 1

我将对可排序容器本身使用click事件委托，因此不必一次又一次地绑定dbclick，这是它的代码

$("#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>

jQuery可排序-将新的on（'dblclick'）绑定到克隆的元素

1 个答案: