替换元素后未触发的分拣和整理事件

中间列在元素上方拖动时应更改宽度。它一直工作，直到我点击代替中间栏的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>'); 
});

来源

2017-07-26 chriemmy

当你更换HTML，听众你已经连接到旧的HTML不会重新附加到新的HTML。

因此，您的处理程序将不再被调用。为了解决这个问题，只需将侦听器附加到新的html，当你替换它。

（jQuery的解决了这个与live而不是on了一段时间，这将自动附加DOM更改后听众）http://api.jquery.com/live/

但live()，因为jQuery的1.7已被弃用，在取出1.9

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

总之;一旦你有sortable听着它，只需清除或更换其内容

来源

2017-07-26 07:15:08

好的，我试过了：https：//jsfiddle.net/shuetvyj/4/。它仍然不起作用。 – chriemmy

，这可能与删除列也会破坏可排序的行为有关。从外观上看，你将不得不重新初始化整个排序结构。在旁注中，为什么不清除中间列的内容？ –

是的，你是对的。在这个例子中，我只替换了一个元素，但在实际应用中，很多其他的东西都被替换了，我宁愿不重写处理它的代码。那谢谢啦！ – chriemmy

不删除列DIV而不是使用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/

来源

2017-07-26 07:21:00 Vineesh

这是有效的，因为它不会删除div，而是清除它的内容，使听众和任何引用'sortable'都完好无损。 –

是的，我从答案中删除了它。我只注意到了这一点 – Vineesh

替换元素后未触发的分拣和整理事件

回答

相关问题