javascript - ajax刷新后Jquery可排序不起作用

Question

我有一个表格，里面装满了我的数据库中的数据。该表是可排序的，并使用 ajax 保存顺序。现在我选择删除选定的行。当该行被删除时，表格将使用 ajax 进行刷新。

我现在唯一的问题是当我删除一行并刷新我的表格时，表格无法再排序（直到我刷新）。

有没有办法来解决这个问题？

这是我的 jquery/ajax 代码：

    $(document).ready(function () {
        $('#sortable').sortable({
            axis: 'y',
            update: function (event, ui) {
                var data = $(this).sortable('serialize');

                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'includes/saveorder.php'
                });
            }
        });
    });

    function deleteFromDatabase(id) {
        if (confirm("Weet u zeker dat u deze pagina wilt verwijderen?")) {
            $.ajax({
                url: "includes/paginas_del.php",
                type: "POST",
                data:'id='+id,
                success: function(data){
                    document.getElementById("alert").style.display = "block";
                    $("#myTable").load("paginas.php #myTable");
                }
            });
        } else {
            document.getElementById("alert").style.display = "none";
        }
    }

这是我的桌子：

<table class="table table-hover table-cust" id="myTable">
          <thead>
            <tr>
                <th scope="col" width="80%">Pagina</th>
                <th width="10%"></th>
                <th width="10%"></th>
            </tr>
          </thead>
          <tbody id="sortable">
            <?php $result = mysql_query("SELECT * FROM pagina WHERE active = '1' ORDER BY sort");
                while ($data = mysql_fetch_assoc($result)) { ?>
                    <tr id="item-<?php echo $data['id'] ?>">
                        <td><a href="paginas_edit.php?pagina_id=<?php print $data['id']; ?>"><?php echo $data['titel'] ?></a></td>
                        <td><a href="paginas_edit.php?pagina_id=<?php print $data['id']; ?>"><i class="fas fa-edit"></i></a></td>
                        <td><a href="javascript:deleteFromDatabase(<?php print $data['id']; ?>)"><i class="fas fa-trash-alt"></i></a></td>
                    </tr>
            <?php } ?>
          </tbody>
        </table>

标签： javascriptjqueryajaxjquery-ui-sortable

Answer 1

此问题是由于对 jqueryload方法的调用所做的是“从服务器加载数据并将返回的 HTML 放入匹配的元素”。

这意味着将整个表替换为新表。因此，旧<tbody id="sortable">元素被替换为新元素，该新元素没有sortable您附加到旧元素的行为。

重建表后尝试重新运行该sortable方法：

function deleteFromDatabase(id) {
    if (confirm("Weet u zeker dat u deze pagina wilt verwijderen?")) {
        $.ajax({
            url: "includes/paginas_del.php",
            type: "POST",
            data:'id='+id,
            success: function(data){
                document.getElementById("alert").style.display = "block";
                $("#myTable").load("paginas.php #myTable");

                $('#sortable').sortable({
                    axis: 'y',
                    update: function (event, ui) {
                        var data = $(this).sortable('serialize');

                        $.ajax({
                            data: data,
                            type: 'POST',
                            url: 'includes/saveorder.php'
                        });
                    }
                });
            }
        });
    } else {
        document.getElementById("alert").style.display = "none";
    }
}