jQuery/Ajax 成功后重新加载表（不是 Datatable()）

Question

我知道这个话题已经被多次讨论过，因为我在发布之前已经搜索并尝试了很多选项，所以请不要关闭它。

我有一个表格，显示我的 mysql 数据库中的班次条目。在我使用 jQuery 删除一行后，我希望在成功时刷新总计行，或者整个表本身。

我遇到的问题是删除和重新加载过程有效，但它只能工作一次而不是多次。

谁能帮忙？

我的桌子：

<table id="cardTable">
  <tr>
    <td>Mon</td>
    <td>11:00 hrs</td>
    <td>£185.00</td>
  </tr>
  <tr>
    <td>Tue</td>
    <td>11:00 hrs</td>
    <td>£100.00</td>
  </tr>
  <tr>
    <td>Wed</td>
    <td>11:00 hrs</td>
    <td>£100.00</td>
  </tr>
  <tr>
    <th>Totals:</th>
    <th>33:00 hrs</th>
    <th>£300.00</th>
  </tr>
</table>

jQuery：

$(document).ready(function(){

    // Delete 
    $('.delete').click(function(){

        var el = this;
        var id = this.id;
        var splitid = id.split("_");

        // Delete id
        var deleteid = splitid[1];

        // AJAX Request
        $.ajax({
            url: 'system/actions/deleteShift.php',
            type: 'POST',
            data: { id:deleteid },
            success: function(response){

                if(response == 1){
                    // Remove row from HTML Table
                    $(el).closest('tr').fadeOut(600,function(){
                        $(this).remove();
                    });
                    $("#cardTable").reload(" #cardTable");
                }
                else {
                    alert('Invalid ID.');
                }

            }
        });

    });

});

Answer 1

我不确定它是否漂亮，您可以尝试将所有内容放在一个函数中，并在成功完成 ajax 后重新初始化它。

$(document).ready(function(){

    initClicks();
    function initClicks() {
        // Delete 
        $('.delete').unbind().click(function(){

            var el = this;
            var id = this.id;
            var splitid = id.split("_");

            // Delete id
            var deleteid = splitid[1];

            // AJAX Request
            $.ajax({
                url: 'system/actions/deleteShift.php',
                type: 'POST',
                data: { id:deleteid },
                success: function(response){

                    if(response == 1){
                        // Remove row from HTML Table
                        $(el).closest('tr').fadeOut(600,function(){
                            $(this).remove();
                        });
                        $("#cardTable").reload(" #cardTable");
                        initClicks();
                    }
                    else {
                        alert('Invalid ID.');
                    }

                }
            });

        });
    }
});