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

将元素拖动到中间列上时，中间列的宽度应该改变。直到我点击替换按钮，替换中间列的html，它才开始工作。然后事件停止被触发。据我所知，

.on（）

应该能够处理这种情况，还是我错了

这是一个简单的演示，演示了该问题：

HTML:

1.
1.
2.

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

$（“.members列”）。可排序({
项目：“.sort”，
连接到：“.members列”
});
$（“#groupB”）。在（“sortover”，function（）上{
控制台日志（'overB'）；
$（'#groupB'）.css（'min-width'，'80px'）；
});
$（“#groupB”）.on（“sortout”，function（）{
console.log（'outB'）；
$（'#groupB'）.css（'min-width'，''）；
});
$（“#替换”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“#B组”）。替换为（“”）；
});

替换html时，附加到旧html的侦听器不会重新附加到新html

因此，您的处理程序将不再被调用。 要解决这个问题，只需在替换新html时将侦听器附加到新html即可

（jQuery用

live

而不是

on

解决了这一问题，后者会在dom更改后自动附加侦听器）

但是自从jQuery 1.7以来，

live（）

已经被弃用，并在1.9中被删除

此外，删除列可能还会中断可排序的行为（因为它不存储选择器，而是第一次调用选择器时的结果，因此保留对从DOM中删除的div的引用）

---

简言之，在收听列div时，不要删除该列div，只需清除或替换其内容

替换html时，附加到旧html的侦听器不会重新附加到新html

因此，您的处理程序将不再被调用。 要解决这个问题，只需在替换新html时将侦听器附加到新html即可

（jQuery用

live

而不是

on

解决了这一问题，后者会在dom更改后自动附加侦听器）

但是自从jQuery 1.7以来，

live（）

已经被弃用，并在1.9中被删除

此外，删除列可能还会中断可排序的行为（因为它不存储选择器，而是第一次调用选择器时的结果，因此保留对从DOM中删除的div的引用）

---

简言之，在收听

sortable

后，不要删除列div，只需清除或替换其内容

，而是使用

replaceWith

使用

.html

，如下所示

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

使用替换

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

$（'body'）.on（'sortover'，'.members列'，function（））{
$（'#groupB'）.css（'min-width'，'80px'）；
});
$（'body'）.on（'sortout'，'.members列'，function（））{
$（'#groupB'）.css（'min-width'，''）；
});
$（“#替换”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“#B组”）。替换为（“”）；
$（“.members列”）.sortable（{items:.sort”，connectWith:“.members列”}）；；
});

---

使用

替换为
使用
.html
如下

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


使用替换

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

$（'body'）.on（'sortover'，'.members列'，function（））{
$（'#groupB'）.css（'min-width'，'80px'）；
});
$（'body'）.on（'sortout'，'.members列'，function（））{
$（'#groupB'）.css（'min-width'，''）；
});
$（“#替换”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“#B组”）。替换为（“”）；
$（“.members列”）.sortable（{items:.sort”，connectWith:“.members列”}）；；
});

这可能与删除列也会破坏可排序的
行为有关。从外观上看，您必须重新初始化整个可排序结构。顺便说一句，为什么不清除中间列的内容呢？是的，您是对的。在本例中，我只替换了一个元素，但在真正的应用程序中很多其他东西也被替换了，我不想重写处理这些事情的代码。所以，谢谢！这可能与删除列也会破坏可排序的行为有关。从外观上看，您必须重新初始化整个可排序结构。顺便说一句，为什么不清除中间那一栏？是的，你是对的。在这个例子中，我只替换了一个元素，但在实际应用程序中，许多其他的东西也被替换了，我不想重写处理这个问题的代码。所以，谢谢！这是有效的，因为它不是删除div，而是清除它的内容，留下侦听器和任何可排序的引用是的，我从answer中删除了它。我只是注意到这是有效的，因为它不是删除div，而是清除它的内容，使侦听器和任何可排序的引用都保持完整。是的，我从answer中删除了它。我只是注意到