Jquery 使用AJAX重新加载网页的一部分后，Draggable停止工作

我已经实现了可拖动和可拖放的jquery函数。他们工作

但是，如果我重新加载网站的一部分，它们就会停止工作

---

例如，我通过AJAX重新加载了一个包含可拖动项的div（以获取更新的项），突然我无法拖放这些新项。虽然我没有用javascript代码重新加载网页的一部分，所以它仍然可以工作。

当您重新加载包含可拖动项的div时，您正在从中删除可拖动功能（它们是新的DOM元素，而不是附加了可拖动项的旧元素）

每次加载这些div时，都需要重新附加可拖动功能。下面是一个如何使用jQuery.live（）实现所需功能的示例：

---

对此，您必须使用live（）方法。查看文档：

N.B.从JQuery 1.7开始，

.live（）

现在被弃用，取而代之的是

.on（）

。然而，无论采用哪种方式，问题仍然存在：为了在AJAX重新加载后自动重新附加可拖动功能，应该绑定到哪种类型的事件？我尝试了

加载

，

更改

，

鼠标向下

，

单击

。。。他们都没有工作。此外，仅在使用插件时适用

我找到的解决方案是将设置可拖动和/或可拖放的代码提取到一个单独的函数中，然后在重新加载页面的相关部分后，AJAX响应可以重新调用该函数

因此，主要的Javascript代码变成：

function init_draggables_and_droppables() {
    $(".draggable").draggable({ revert: 'invalid' });
    ...
}

jQuery(function($) {
    init_draggables_and_droppables();
    ...
});

然后AJAX响应包含：

jQuery("div.to-reload").replaceWith(reloaded);
init_draggables_and_droppables();

---

很好用

真的有拖拉功能吗？我想他必须摧毁当前的拖拉物，创造新的拖拉物…@David Hedlund-不，没有为拖拉物而活。不过，正如我的链接中所描述的，你可以通过“黑客生存”来工作。