jQuery排序只有一个列表仍然更新,如果取消


jQuery Sortable only one list still updated if cancelled

我有2个列表,使用jQuery可排序连接。当我将一个项目从一个列表移动到另一个列表时,向PHP脚本发出2个ajax请求,该脚本使用列表的内容更新数据库-这工作良好。

然而,我随后添加了一个JavaScript确认弹出窗口,并在按下'OK'时将ajax请求置于此条件下。如果我在这个弹出框上按"取消",那么这仍然可以正常工作-然而,如果我"取消",那么有一个项目移动的列表不更新,所以两个列表最终与项目。

这是我的代码:

$(function() {
    $(".week1").sortable({
      connectWith: ".week2, .week1"
    }).disableSelection();
  });
    $(".week1, .week2").on("sortreceive", function (event, ui) {
        var answer = confirm("Move job?");
        if (!answer) {
            $(ui.sender).sortable('cancel');
            return false;
        }else{
            $('.week1, .week2').sortable({
                    update: function (event, ui) {
                        var data = $(this).sortable('serialize');
                        $.ajax({
                            data: data,
                            type: 'POST',
                            url: 'ajax_user_schedules.php'
                        })
                        .done(function( response ){
                            console.log( response );
                        });
                    }
                });
        }
    });

这个问题是有意义的,因为要更新的代码在else中,所以添加了一个项目的列表不会运行这个代码,我只是不知道如何修复它。我试着将week1和week2排序表分开,但这不起作用,如果我将更新代码从这种情况中取出,那么我就会看到一个不同的问题-如果我取消,那么在项目放回去之前,有一个项目被拿走的列表就会更新,所以两个列表最终都没有项目。我正在做的事情一定有问题。

任何帮助将是伟大的!

谢谢,

基于答案的UPDATE

$(function() {
  $(".week1, .week2").sortable({
      connectWith: ".week2, .week1",
      update: function (event, ui) {
                var data = $(this).sortable('serialize');
                console.log(this); // this is shown before confirm popup appears
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'ajax_user_schedules.php'
                })
                .done(function( response ){
                    console.log( response );
                });
            }
    }).disableSelection();
    $(".week1, .week2").on("sortreceive", function (event, ui) {
        var answer = confirm("Move job?");
        if (!answer) {
            $(ui.sender).sortable('cancel');
            return false;
        }
    });
});

您的else子句重新初始化排序表。看起来你打算在第一个.sortable({})初始化器中使用update处理程序;您根本不需要update,因为它会在每次dom更改时触发。把它拉到它自己的函数中:

$(".week1").sortable({
      connectWith: ".week2, .week1"
}).disableSelection();
    var update = function (sortable) {
            var data = $(sortable).sortable('serialize');
            $.ajax({
                 data: data,
                 type: 'POST',
                 url: 'ajax_user_schedules.php'
            })
            .done(function( response ){
                 console.log( response );
            });
      }
$(".week1, .week2").on("sortreceive", function (event, ui) {
    var answer = confirm("Move job?");
    if (!answer) {
        $(ui.sender).sortable('cancel');
        return false;
    }
    else {
        update($(".week1"));
        update($(".week2"));
    }
});

(另外,.on(sortreceive)处理程序绑定也应该包装在一个ready处理程序中)