使用AJAX调用更新无序列表后，Scriptaculous“Sortable.create（）”方法不起作用

Question

这是我使用该网站大约两年后的第一个stackoverflow帖子，所以请不要发布猎犬。

我试图创建一个网站的“编辑我的个人资料照片”部分，用户可以（1）添加个人资料照片; （2）删除个人资料照片;和（3）重新排列她的个人资料照片。

从数据库的角度来看，每个用户都被限制为五个配置文件图片。因此，我的用户表具有image0，image1，image2，image3和image4的字段。

添加照片很简单，但在删除和重新排序照片时遇到了一个奇怪的问题。

要重新排序照片，我使用了原型/ scriptaculous“sortable.create（）”方法。具体来说，我在无序列表的列表元素中显示每个照片。

重新排序任何列表元素将进行一次ajax调用，并在相应的php脚本中对图像进行适当的重新排序（例如，以前的image0将 现在写入数据库到image2等）。

然后我重新创建为HTML更新的无序图像列表。

最后，在处理ajax的javascript函数（即，如果ajax.status == 200和ajax.readyState == 4），我调用sortable.create方法再次创建新的无序图像列表排序。

上述作品绝对没问题。现在这里是谜题：

无序列表中的每个列表元素还包含一个链接，用于删除相关特定图像。
想象一张照片列表，每张照片都有无序列表中每张照片下的“删除此照片”链接。

这里的HTML是什么样子的草图：

<ul id="profile_pics" onmouseup="reorder_photos();"> 
    <li id="0"><img src="images/image0.jpg"><a href="?delete_id=0" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image0');">delete this photo</a></li> 
    <li id="1"><img src="images/image1.jpg"><a href="?delete_id=1" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image1');">delete this photo</a></li> 
    <li id="2"><img src="images/image2.jpg"><a href="?delete_id=2" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image2');">delete this photo</a></li> 
    </ul> 

注意，点击“删除照片”链接将调用delete_photo功能，但不会牵连因为调用的reorder_photos功能stopPropagation（）函数。

delete_photo函数对PHP脚本执行AJAX调用，该脚本（1）删除有问题的照片，（2）进行适当的数据库调整，以及（3）重新创建无序列表。 ajax处理函数然后调用sortable.create（） 来使这个新的无序列表可排序。

问题是新的无序列表不是可以安装的。

是什么让问题更加怪异和混乱的是，当我打电话给另一个像“$（'profile_pics'）。fade（{duration：2.5}）的scriptaculous方法;”在ajax处理函数中，这是否工作。

为什么？为什么？为什么？

任何帮助将无限赞赏。如果示例代码有帮助，我可以发布 - 我只是不想让这篇文章比以前更具百科全书性。

Answer 1

当页面上的内容被替换时，事件处理程序将随其一起移动。您需要在AJAX调用后重新初始化您的可排序项。