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

而是使用replaceWith使用.html，如下所示

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

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

使用replaceWith

$('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/

Answer 2

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

结果，您的处理程序将不再被调用。要解决此问题，只需在更换后将侦听器附加到新的html。

（jQuery使用live代替on解决了一段时间，这会在dom更改后自动附加侦听器）http://api.jquery.com/live/

但{j} 1.7之后已将live()弃用，并已在1.9

中删除

另外，删除列可能也会破坏sortable的行为（因为它不会存储选择器，而是首次调用时选择器的结果，因此保留对div的引用你从DOM中删除了。

总之;一旦有sortable收听，只要清除或替换其内容

，就不要删除列div

替换元素后未触发的排序和排序事件

2 个答案: