php - JQuery .load() 从可排序列表中删除 .sortable() 函数

Question

我会尝试用尽可能少的代码来解释我的问题。

基本上我有几个以通常方式连接的可排序列表。列表中的每个项目都有一些隐藏的元素，这些元素可以通过相应项目上的按钮进行切换。还有第二个按钮使列表项向上滑动并从列表中删除 - 然后被发送到新列表。这与 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>

编辑:这是我用来记录列和位置的 .sortable() 代码:

$(document).ready(function {
$("#sortable01, #sortable0, #sortable1, #sortable2, #sortable3, #sortable4").sortable({
connectWith : ".sortable",
items : "li:not(.notsortable)",
receive  : function(event, ui){ 

         var column = $(this).parent().attr('id');
         var index = ui.item.index() + 1;
         var id = $("#"+column+" li:nth-child("+index+") .hiddenid").val();


         $("#"+column+" li:nth-child("+index+") ").addClass('notsortable');

         $.ajax({

                 url: "update_column.php",
                 type:"POST",
                 data: "column="+column+
                       "&id="+id,
                 success: function(){


                           $("#"+column+" li:nth-child("+index+")   ").removeClass('notsortable');

                                      }        

                });

                },

beforeStop : function (event, ui) {



                 $.ajax({

                 url: "update_column_order.php",
                 type:"POST",
                 data: {
                            sort0:$('#sortable0').sortable('serialize'),
                        sort1:$('#sortable1').sortable('serialize'),
                        sort2:$('#sortable2').sortable('serialize'),
                        sort3:$('#sortable3').sortable('serialize')
                       }

                });



                            },







 })
.disableSelection();
  $(".hide").hide();
 });

Answer 1

在 load 的回调中重新初始化 ajax 替换元素的可排序功能:

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