javascript - 替换元素后未触发 Sortover 和 sortout 事件

Question

当将元素拖动到中间列上时，中间列应该改变宽度。它确实有效，直到我单击替换按钮来替换中间列的 html。然后事件停止被触发。据我所知 .on() 应该能够处理这种情况，还是我错了？

这是一个简单的演示，演示了该问题:https://jsfiddle.net/shuetvyj/3/

HTML:

<div class="members-column">
  <div class="sort"> 1 </div>
  <div class="sort"> 1 </div>
</div>
<div id="groupB" class="members-column">

</div>
<div class="members-column">
  <div class="sort"> 2 </div>
</div>
<a href="" id="replace">replace groupB</a>

Javascript:

$(".members-column").sortable({
   items: ".sort",
   connectWith: ".members-column"    
 });
$("#groupB").on("sortover", function() {
  console.log('overB');
  $('#groupB').css('min-width','80px');
});
$("#groupB").on("sortout", function() {
  console.log('outB');
  $('#groupB').css('min-width','');
});
$("#replace").on("click", function(e) {
    e.preventDefault();
  $("#groupB").replaceWith('<div id="groupB" class="members-column"></div>');
});

Answer 1

使用 .html 代替 replaceWith，如下所示

$("#replace").on("click", function(e) {
    e.preventDefault();
  $("#groupB").html("");
});

https://jsfiddle.net/shuetvyj/5/

使用替换

$('body').on('sortover', '.members-column', function() {
     $('#groupB').css('min-width','80px');
    });
  $('body').on('sortout', '.members-column', function() {
     $('#groupB').css('min-width','');
    });
$("#replace").on("click", function(e) {
    e.preventDefault();
    $("#groupB").replaceWith('<div id="groupB" class="members-column"></div>');
    $(".members-column").sortable({ items: ".sort",connectWith: ".members-column" });;
});

https://jsfiddle.net/shuetvyj/8/