jQuery 可排序 - 将 new on('dblclick') 绑定到克隆的元素

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被附加到另一个列表，它就需要绑定正确的.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');
});
});

但这并不能正确调用函数？也许$(这个(的用法不正确？

update_holding((函数不应该涉及这个问题，因为它只是另一个管理数据库更新的脚本的ajax帖子。

以下是一个工作示例：https://jsfiddle.net/qn6v42c9/

另请阅读jQuery clone((不克隆事件绑定，即使使用on((和
jQuery.on((也不会；不适用于克隆元件

Answer 1

我会在可排序容器本身上使用点击事件委派，这样我就不必一次又一次地绑定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>