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.