Php JQuery.load（）从可排序列表中删除.sortable（）函数

我将尽可能用少量的代码来解释我的问题

基本上，我有几个以通常方式连接的可排序列表。列表中的每个项目都有一些隐藏的元素，这些元素通过相应项目上的按钮进行切换。还有第二个按钮，使列表项滑动并从列表中删除，然后发送到新列表。这与ajax调用配合使用，ajax调用成功后使用.load（）函数刷新接收的可排序列表

问题是：当我使用.load（）刷新接收的可排序列表时，新的列表项会出现，但列表会失去其排序功能，并且会显示每个列表项上的所有隐藏项。知道.load（）函数为什么会删除刷新页面元素的交互性吗

这是删除项目并刷新新列表的代码：

$(document).ready(function click(){
$(".finished").click(function() {

  if (confirm('Are you sure  is complete?')) {

  $(this).closest(".card").slideUp();

  var id = $(this).closest(".card").find(".hiddenid").val();
  var machinequantity = $(this).closest(".card").find(".machinequantity").val();

  $.ajax({

       url: "update_item_machine_complete.php",
       type: "POST",
       data: "&id="+id+"&machinequantity="+machinequantity,        
       success: function() {
                           $('#complete').load('index.php #sortable4')         
                           }
     });

    }
  });
});

以下是接收列表的示例：

            <div id="complete" class="box">
    <ul id="sortable4" class="sortable">
    <li class="notsortable"><h1>Complete</h1></li>
<?php

include("php/database_connect.php");


$result = mysql_query("SELECT * FROM orders WHERE misc='complete' ORDER BY columnpos   ASC ");

while($row = mysql_fetch_array($result))

              {
         echo'  

        <li id="id_' . $row['id'] . '">
         <div class="card">
         <table>
         <tr>
         <td class="left">' . $row['customer'] . '</td>
         <td></td>
         <td class="right">' . $row['ponumber'] . '</td>
         </tr>
         <tr>
         <td class="left">' . $row['partnumber'] . '</td>
         <td><div class="show"></div></td>
         <td class="right">' . $row['quantity'] . ' x Black</td>
         </tr>
         </table>
         <div class="hide">
         <p>Quantity Done: <span><input class="machinequantity" type="text" value="' . $row['quantity'] . '" /><input type="submit" value="update" /></span></p>
         <p><input class="finished" type="submit" value="Finished" /></p>
         <input class="hiddenid" type="hidden" value="' . $row['id'] . '" />
         </div>
         </div>
         </li>

         ';
         }
?>






    </ul>
    </div>

---

在

load

的回调中重新初始化ajax替换元素上的可排序功能：

$('#complete').load('index.php #sortable4', function() {
    $('#sortable4').sortable(options);
});

---

发生这种情况的原因是这些元素已被完全替换，因此您需要再次调用列表…因为您已将其替换，例如：

$('#complete').load('index.php #sortable4', function() {
   $("#sortable4").sortable();
});

---

好的，谢谢你的快速回复！我只使用jQuery几个星期就开始了。我需要再次分配所有可排序选项吗？或者我应该调用以前的可排序函数吗？如果您有一个函数进行初始化，就使用它。当然，如果我们能看到它，它会有所帮助。因此，我将正确地分配可排序函数，比如（函数listsortable（）{…...，并执行回调，比如$（'#sortable4'）.listsortable（）；？不，比如

函数initSortable（）{$（“#sortable4”）.sortable（{选项…}

，然后在

load

的回调中调用它，

initSortable（）

。

$('#complete').load('index.php #sortable4', function() {
   $("#sortable4").sortable();
});