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);
});

Answer 2

发生这种情况是因为这些元素已被完全替换，您需要再次在列表中调用.sortable() ...因为您已将其替换，例如：

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

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

2 个答案: