从 Ajax 调用返回的 Jquery 代码不起作用

Question

我正在使用可排序的 Jquery UI：

  $("ul.filter_age").sortable({
    handle: ".handle",
    update: function (event, ui) {

        var data = $('#formage').serialize();

        $.ajax({

            data:   data,
            type:   'POST',
            url:    '/path/to/php/script',
            success:function(data) {

                $('#age_form').html(data);

            }

        });

    }

  });

因此，一旦有人执行了排序，我就会让它调用一个 php 脚本，它会在其中获取信息并更新数据库中的视图顺序。然后我从数据库中获取所有数据并将其输出回 jquery 脚本，以便他们可以看到更新的视图顺序。但是，当这种情况发生时，可排序脚本不再起作用。 ajax 更新后无法拖动列表。

所以问题是，我如何通过 jquery/ajax 进行调用并让返回的 html 替换现有的 html 并让 sortables 仍然有效？返回的 html 与原始的可排序 html 相同。我是否必须在成功函数中重新初始化可排序的 jquery 代码？

Answer 1

好吧，我所做的就是将它放入一个函数中并以这种方式调用它。请让我知道这是执行此操作的最佳方法还是有更好的方法...谢谢！

function updateAgeSort() {
$("ul.filter_age").sortable({
    handle: ".handle",
    update: function (event, ui) {

        var data = $('#formage').serialize();

        $.ajax({

            data:   data,
            type:   'POST',
            url:    '/path/to/php/script',
            success:function(data) {

                $('#age_form').html(data);

                updateAgeSort();

            }

        });

    }

  });
}

updateAgeSort();