JQuery 从 Ajax 更改复选框状态

Question

我的代码有一个小问题。 我有一个函数，它需要 loadData AJAX 页面。 这个结果在我的页面上放置了复选框。 （没关系）

现在我想当我点击一个复选框时，执行一个 AJAX 请求是改变数据库中的一个值（这也可以）。

问题是： 当我单击一个复选框（未选中）时，它会打勾并执行 ajax，一旦执行了 ajax，该框就会单独取消选中。

我做了几次测试，发现问题只有在 Ajax 请求中的复选框被选中时才会出现。

注意：我尝试添加 $(selector).attr('checked', true) 和 false，但没有任何效果。

Jquery（问题出在Ajax执行时的loadData函数中，复选框单独取消选中）：

 $(document).ready(function()  {
    $('#TableContainer .RCkbox').live('click',function(){

        var idOperation = 550;
        if($(this).is(":checked")){

            $.ajax({
                type: "POST",
                url: "includes/ajax/OperationRapprochement.php",
                data: "sessionId=" + <?php echo $User->getId(); ?> + "&AccountNumber=" + <?php echo $compte->getId(); ?> + "&idOperation=" + idOperation + "&action=rapproche",
                success: function(msg)
                {
                    //TODO  

                }
            });
        }
        else{

                $.ajax({
                type: "POST",
                url: "includes/ajax/OperationRapprochement.php",
                data: "sessionId=" + <?php echo $User->getId(); ?> + "&AccountNumber=" + <?php echo $compte->getId(); ?> + "&idOperation=" + idOperation + "&action=derapproche",
                success: function(msg)
                {
                      //TODO

                }
            });
       }
    });


    function loadData(){
    $.ajax({
            type: "POST",
            url: "includes/ajax/test.php",
            data: "sessionId=" + <?php echo $User->getId(); ?> + "&AccountNumber=" + <?php echo $compte->getId(); ?>,
            success: function(msg){
                    $("#TableContainer").ajaxComplete(function(event, request, settings){
                           $("#TableContainer").html(msg);
                    });
            }
        });
    }

    loadData();
});

我已经制作了视频来向您展示实际的问题：http://youtu.be/nG9XF2f4M18

感谢您的帮助。

Answer 1

** 答案是根据我在 cmets 中获得的信息更新的 **

我在您的文件中发现了问题。

问题是您使用事件“.ajaxComplete”。 如果您正确阅读了documentation，它表示每次进行ajax 调用时都会调用该事件。

因此，由于您在单击复选框时进行了 ajax 调用，因此当您收到结果时，将再次调用 loadData 函数中的回调，这意味着它再次执行 $("#TableContainer").html(msg);... 换句话说，它取代了又是内容。 这就是您丢失选中复选框的原因。

您只需在代码中进行更改，只需删除事件 .ajaxComplete，因为您不需要它们。

这是你的代码：

function loadData(){
    $.ajax
    ({
        type: "POST",
        url: "includes/ajax/test.php",
        data: "number=" + number,
        success: function(msg)
        {
            $("#TableContainer").ajaxComplete(function(event, request, settings) {
                $("#TableContainer").html(msg);
            });
        }
    });
}

应该是：

function loadData(){
    $.ajax
    ({
        type: "POST",
        url: "includes/ajax/test.php",
        data: "number=" + number,
        success: function(msg)
        {
                $("#TableContainer").html(msg);
        }
    });
}

您的其他 2 个 ajax 请求也是如此。 成功的代码在收到结果后执行。