Question

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

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

从数据库的角度来看，每个用户仅限于五张个人资料图片。因此，我的users表包含image0，image1，image2，image3和image4的字段。

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

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

然后重新排序任何列表元素将进行ajax调用，并在相应的php脚本中我对图像进行了适当的重新排序（例如，以前的图像将会是现在将数据库写入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函数，但由于调用了stopPropagation（）函数，因此不会涉及reorder_photos函数。

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

问题是新的无序列表不合适。

当我调用另一个像“$（'profile_pics'）。fade（{duration：2.5}）;'fade（{duration：2.5}）”这样的另类脚本方法时，问题更加奇怪和令人困惑的是什么？在ajax处理功能中，它可以工作。

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

任何帮助都会受到无限的赞赏。如果示例代码有帮助，我可以发布 - 我只是不想让这篇文章比现在更具百科全书。

Answer 1

在页面上替换内容时，事件处理程序会随之更新。在AJAX调用之后，您需要重新初始化可排序。

ScriptAXulous“Sortable.create（）”方法在进行AJAX调用以更新无序列表后不起作用

1 个答案: