JQuery .load() Entfernen .sortable() -Funktion von sortierbaren Liste

Question

Ich werde versuchen, mein Problem mit so wenig Code wie möglich zu erklären.

Grundsätzlich habe ich mehrere sortierbare Listen in der üblichen Weise verbunden. Jedes Element in der Liste hat einige versteckte Elemente, die mit einer Schaltfläche auf den entsprechenden Elementen umgeschaltet werden. Es gibt auch eine zweite Schaltfläche, die bewirkt, dass das Listenelement auf "SlideUp" gesetzt und aus der Liste entfernt wird - und dann an eine neue Liste gesendet wird. Dies funktioniert in Verbindung mit einem Ajax-Aufruf, der bei erfolgreicher Verwendung die Funktion .load() verwendet, um die empfangende sortierbare Liste zu aktualisieren.

Das Problem: Wenn ich .LOAD() verwenden, um die empfangende sortierbare Liste zu aktualisieren, ist das neue Listenelement vorhanden, aber die Liste verliert ihre Sortierbarkeit und alle ausgeblendeten Elemente auf jedem Listenelement werden angezeigt. Gibt es eine Idee, warum die Funktion .load() die Interaktivität von aktualisierten Seitenelementen entfernt?

Dies ist der Code ein Element aus und aktualisieren Sie eine neue Liste zu entfernen:

$(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')   
          } 
    }); 

    } 
    }); 
}); 

Hier ist ein Beispiel der Empfangsliste:

  <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> 

EDIT: Dies ist die .sortable ist() Code Ich benutze, um Spalte und Position zu notieren:

$(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

Reinitialisieren Sie die sortierbare Funktionalität auf th Ajax-ersetzt e Elemente innerhalb load ‚s Rückruf:

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

Answer 2

Dies geschieht, weil diese Elemente vollständig ersetzt werden, werden Sie .sortable() auf der Liste wieder aufrufen müssen ... da Sie es ersetzt sind, beispielsweise :

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