删除、淡出和删除评论

Question

当我删除一条评论时，rowCount不会更新为不包含实际的评论数量。因为我使用了fadeout函数，而不是remove()函数，因为我希望它从视图中淡出。

我已经尝试过了，但这并没有帮助：

$('#item_'+DbNumberID).fadeOut("slow", function() {
    $(this).remove();
});

代码：

jQuery.ajax({
    type: "POST",
    url: "delete-comment.php", 
    dataType:"text", 
    data:myData, 
    success: function(response){
        $('#item_'+DbNumberID).fadeOut("slow");
        var rowCount = $('#comment li').length;
        alert(rowCount);
        return false;   
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
});

编辑：

这是我的完整代码。它可以是简单的模式吗？

    //##### Send delete Ajax request to response.php #########
$("body").on("click", "#comment .del_button", function(e) {
    e.preventDefault();

    //e.returnValue = false;
    var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
    var DbNumberID = clickedID[1]; //and get number from array
    var myData = 'action=delete&id='+ DbNumberID; //build a post data structure

    jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "add-comment.php", //Where to make Ajax calls
        dataType: "text", // Data type, HTML, json etc.
        data: myData, //Form variables
        success: function(response){
            //on success, hide  element user wants to delete.
            $('#item_'+DbNumberID).fadeOut(500, function() {
                setTimeout(function() {
                    $('#item_'+DbNumberID).remove();
                }, 500);
            });

            var rowCount = $('#comment li').length;
            rowCount--;
            alert(rowCount);

            if (rowCount == 0) {    
                $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
            }
            return false;
        },

        error:function (xhr, ajaxOptions, thrownError){
            //On error, we alert user
            alert(thrownError);
        }
    });
});

Answer 1

这有点老生常谈，但是你可以设置一个和你的fadeOut一样长的timeOut

$('#item_'+DbNumberID).fadeOut(500, function() {
setTimeout(function() {
  $('#item_'+DbNumberID).remove();
}, 500);
});

您也可以尝试

$('#item_'+DbNumberID).fadeOut('slow').queue(function(next) {
$(this).remove();
next();
});

http://cdmckay.org/blog/2010/06/22/how-to-use-custom-jquery-animation-queues/

Answer 2

答案已经选定，但我还是要回答，以使此页面更有用:)

您的“成功”处理程序

    success: function(response){
        //on success, hide  element user wants to delete.
        $('#item_'+DbNumberID).fadeOut(500, function() {
            setTimeout(function() {
                $('#item_'+DbNumberID).remove();
            }, 500);
        });

        var rowCount = $('#comment li').length;
        rowCount--;
        alert(rowCount);

        if (rowCount == 0) {    
            $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
        }
        return false;
    },

这是john smith提到的hackey，但它不一定是hackey。实际问题是，您忽略了fade()不会停止代码执行这一事实。当fade(500)完成时，fade(500)调用后面的代码已经运行并返回了行数，这显然是您意想不到的，因为fade仍在运行。此问题的正确解决方案是将依赖于fade()结果的所有代码包装在fade complete回调中，如下所示

success: function(response){

    var rowCount = $('#comment li').length;

    //on success, hide  element user wants to delete.
    $('#item_'+DbNumberID).fadeOut(500, function() {
    
        $('#item_'+DbNumberID).remove();
        
        /* the code that has been moved into this callback */
        rowCount = $('#comment li').length;

        alert(rowCount);

        if (rowCount == 0) {    
            $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
        }
    });
    return false;
},