Reload Table (NOT Datatable()) after jQuery/Ajax success

Question

I know this topic has been covered multiple times as i've searched and tried many options before posting this so please don't close it.

I have a table that shows shift entries from my mysql database. After I delete a row using jQuery I would like the totals row to be refreshed upon success, or the whole table itself.

The issue im experiencing is that the delete and reload process works but it only works once and not multiple times.

Can anyone help?

My table:

<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>

The 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

I am not sure if it's it pretty, you can try to put everything in a function and reinitialize it after a successfull 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.');
                    }

                }
            });

        });
    }
});