刷新可排序 div 后可排序不工作

Question

我有 2 个 jQuery 函数，一个允许排序，另一个允许从列表中的 div 中删除。一切正常，直到我删除其中一个列表项。然后拖动停止工作，直到我刷新页面。

我也遇到了删除功能不会立即删除单击要删除的div的问题，如果单击多个，只会删除最近的一个。这就是为什么在下面的delete函数中刷新div的原因。

任何帮助将不胜感激！

JQuery 可排序

    $(document).ready(function(){   
          function slideout(){
      setTimeout(function(){
      $("#response").slideUp("slow", function () {
          });

    }, 2000);}

        $("#response").hide();
        $(function() {
        $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {

                var order = $(this).sortable("serialize") + '&update=update'; 
                $.post("updateReadingList.php", order, function(theResponse){
                    $("#response").html(theResponse);
                    $("#response").slideDown('slow');
                    slideout();
                });                                                              
            }                                 
            });
        });

    }); 

JQuery 删除函数

    $(document).ready(function(){ $(function() {
        $( '#reading' ).on( 'click', 'a.deletefromrl', function(){
            $(this).closest('li').fadeOut('slow');
            var order = $('#list ul').sortable("serialize") + '&update=update' + '&id=' + $(this).attr('data-storyid'); 
            $.post("deletefromReadingList.php", order, function(theResponse){
                    $("#response").html(theResponse);
                }); 
                var auto_refresh = setInterval(
                    function()
                    {
                        $('ul').load('reloadReadingList.php');
                    }, 0);  
        })
    })
    })

Answer 1

一种解决方案是将绑定操作放在它自己的函数中，并在页面加载时调用它，然后每次重新加载列表时调用它：

已编辑： 我不确定最后一个出了什么问题，但这似乎对我有用：

$(document).ready(function(){   
  function slideout(){
      setTimeout(function(){
      $("#response").slideUp("slow", function () {
          });

    }, 2000);}

    function bindSortable()
    {
        $("#list ul").sortable(
        { 
            opacity: 0.8, 
            cursor: 'move', 
            update: function() {

                var order = $(this).sortable("serialize") + '&update=update'; 
                $.post("updateReadingList.php", order, function(theResponse){
                    $("#response").html(theResponse);
                    $("#response").slideDown('slow');
                    slideout();
                });                                                              
            }                                 
        });
    }

    bindSortable();

    $( '#reading' ).on( 'click', 'a.deletefromrl', function(){
        $(this).closest('li').fadeOut('slow');
        var order = $('#list ul').sortable("serialize") + '&update=update' + '&id=' + $(this).attr('data-storyid'); 
        $.post("deletefromReadingList.php", order, function(theResponse){
                $("#response").html(theResponse);
            }); 
            var auto_refresh = setInterval(
                function()
                {
                    $('ul').load('reloadReadingList.php', function()
                    {
                        bindSortable();
                    });
                }, 0);  
    })
});