Requesty Ajax - odświeżanie zawartości tabeli

Cześć, mam problem z prostym kodem JS.

Mam tabelkę z różnymi pozycjami, każda pozycja oprócz danych posiada przycisk, który umożliwia usunięcie rekordu tabeli.

<td class="card-options">
   <a href="${pageContext.request.contextPath}/card/delete/${card.id}" class="btn btn-danger btn-sm delete-card" style="margin: 2px;">
     Delete
   </a>
</td>

Usunięcie przycisku jest obsłużone w odpowiedniej funkcji JS:

 $('.delete-card').click(function(e) {
        e.preventDefault();
        console.log(ctx + $('.delete-card').attr('href'));
        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            url:  ctx + $('.delete-card').attr('href'),
            success : reloadBoard,
            error : function(){
                console.log("Request failed.");
            }
        });
    });

Przy pierwszym kliknięciu wszystko działa, leci request, rekord jest usuwany, wskakuje funkcja reloadBoard:

function reloadBoard() {
    $.ajax({
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: "POST",
        url:  ctx + "/card/cards",
        success : refreshBoardTable,
        error : function(){
            console.log("Request failed.");
        }
    });
}

Jej zadaniem jest pobranie danych tabeli w formacie JSON, a następnie przekazanie tych rekordów do funkcji refreshBoardTable:

function refreshBoardTable(data) {
    var oldTbody = document.getElementById('cards-list-body');
    newTbody = document.createElement('tbody');
    newTbody.id = 'cards-list-body';
    newTbody.appendChild(document.getElementById("cards-list-title"));

    for(var i = 0; i < data.length; i++){
        var tr = document.createElement('tr');
        tr.id = 'card-' + i;

        if(data[i]){
            tdCardId = document.createElement('td');
            tdCardId.className = 'card-id';
            tdCardId.appendChild(document.createTextNode(data[i].id));

            tdCardType = document.createElement('td');
            tdCardType.className = 'card-type';
            tdCardType.appendChild(document.createTextNode(data[i].type));

            tdCardCategory = document.createElement('td');
            tdCardCategory.className = 'card-category';
            tdCardCategory.appendChild(document.createTextNode(data[i].category));

            tdCardDescription = document.createElement('td');
            tdCardDescription.className = 'card-description';
            tdCardDescription.appendChild(document.createTextNode(data[i].description));

            tdCardOptions = document.createElement('td');
            tdCardOptions.className = 'card-options';

            deleteCardButton = document.createElement('a');
            deleteCardButton.setAttribute('href', ctx + '/card/delete/' + data[i].id);
            deleteCardButton.text = 'Delete';
            deleteCardButton.className = 'btn btn-danger btn-sm delete-card';

            editCardButton = document.createElement('a');
            editCardButton.setAttribute('href', ctx + '/card/edit/' + data[i].id);
            editCardButton.text = 'Edit';
            editCardButton.className = 'btn btn-info btn-sm edit-card';

            tdCardOptions.appendChild(deleteCardButton);
            tdCardOptions.appendChild(editCardButton);

            tr.appendChild(tdCardId);
            tr.appendChild(tdCardType);
            tr.appendChild(tdCardCategory);
            tr.appendChild(tdCardDescription);
            tr.appendChild(tdCardOptions);
        }
        newTbody.appendChild(tr);
    }
    oldTbody.parentNode.replaceChild(newTbody, oldTbody);
}

Tabela jest generowana poprawnie (może poza brakiem formatowania kodu, ale mniejsza o to). Problem występuje, gdy chcę ponownie usunąć inny rekord. Klikam na przycisk delete i wtedy już nie jest uruchamiana obsługa naciśnięcia wspomnianego przycisku.

Siedzę nad problemem już kilka dobrych godzin i nie mogę znaleźć dlaczego po przeładowaniu listy (funkcja refreshBoardTable) obsługa przycisku nie działa.

Sprawdź:

$(document).on('click', '.delete-card', function(e) {
    //reszta
});

Czad, działa. Dziękuję :)