jquery可排序connectWith调用更新方法两次
基础概念
jQuery UI 的 sortable 方法允许你创建可排序的列表。connectWith 是 sortable 方法的一个选项，它允许你将多个可排序的列表连接起来，使得一个列表中的元素可以被拖动到另一个列表中。
问题描述
在使用 connectWith 时，可能会遇到 update 方法被调用两次的问题。
原因
update 方法被调用两次的原因通常是因为 sortable 事件被触发了两次。这可能是由于以下原因之一：
- 初始化问题：
sortable可能在初始化时被调用了两次。 - 事件绑定问题：可能在代码的其他部分重复绑定了
sortable事件。
解决方法
1. 确保 sortable 只初始化一次
确保在代码中只调用一次 sortable 方法。例如：
$(function() {
$("#list1").sortable({
connectWith: "#list2",
update: function(event, ui) {
console.log("List updated");
}
});
$("#list2").sortable({
connectWith: "#list1",
update: function(event, ui) {
console.log("List updated");
}
});
});2. 防止事件重复绑定
确保在绑定事件时不会重复绑定。可以使用 off 方法先移除之前的事件绑定，然后再绑定新的事件。例如：
$(function() {
$("#list1").off("sortupdate").sortable({
connectWith: "#list2",
update: function(event, ui) {
console.log("List updated");
}
});
$("#list2").off("sortupdate").sortable({
connectWith: "#list1",
update: function(event, ui) {
console.log("List updated");
}
});
});3. 使用 stop 方法
在拖动结束时调用 stop 方法，可以防止 update 方法被多次调用。例如：
$(function() {
$("#list1").sortable({
connectWith: "#list2",
update: function(event, ui) {
console.log("List updated");
},
stop: function(event, ui) {
// 防止 update 方法被多次调用
}
});
$("#list2").sortable({
connectWith: "#list1",
update: function(event, ui) {
console.log("List updated");
},
stop: function(event, ui) {
// 防止 update 方法被多次调用
}
});
});参考链接
通过以上方法，可以有效解决 connectWith 调用 update 方法两次的问题。确保 sortable 只初始化一次，防止事件重复绑定，并在拖动结束时调用 stop 方法，可以有效避免 update 方法被多次调用。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
即时通信 IM
云直播
实时音视频活动推荐
腾讯云开发者
