代码之家 › 专栏 › 技术社区 › jerrygarciuh

jQuery sortable-Bind new on('dblclick')到克隆的元素

jquery javascript

jerrygarciuh · 技术社区 · 7 年前

我使用jQuery sortable()连接了列表。

列表初始化为

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

$('#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被附加到另一个列表中,它就需要对的

元素仍然可以被拖动到新列表中而不会出错。

我曾尝试在初始化调用中将绑定函数添加到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

1 回复 | 直到 7 年前

Just code 7 年前

我将在可排序容器本身上使用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>