Không bắt được event onclick sau khi reload datatables

Đây là đoạn code jQuery để bắt event onclick của mình:

$('input#delete').on('click', function() {
	var r = confirm("Do you really want to delete this row?");
	
	if (r == true) {
		// Get index of this row
		var detailsId = $(this).data('id');
		console.log(detailsId);
		
		// Call ajax function
		$.ajax({
    		dataType: "json",
			type: 'POST',
			data: {},
			contentType: "application/json",
			url: "/SERP/stockRequisition/deleteDetails/" + detailsId,
			success: function(data){
				console.log(data.deleteStatus);
				if(data.deleteStatus == true){
					// Remove row from DataTable by index (detailsId - 1)
					var table = $('#detailsTable').dataTable();
					table.fnDestroy();
					$('#detailsTable tbody').empty();
					reloadTable();
					// var table = $('#detailsTable').DataTable();
					// table.row(detailsId-1).remove().draw(false);
				} else if (!data.deleteStatus) {
					alert("Delete failed! Please try again later.");
				}
			},
			error: function(){
				alert('Cannot delete this details!!');
			}
    	});
	}
});`

Hàm reloadTable để load lại toàn bộ bảng datatables sau khi delete 1 dòng:

function reloadTable(){
console.log("Reload table");

$.ajax({
	dataType: "json",
	type: 'GET',
	data: {},
	url: "/SERP/stockRequisition/srdJsonList",
	contentType: "application/json",
	success: function(data){
		if(data.srdes.length == 0){
			alert("No data in table.");
		} else {
			var rowCount = 1;
			
			$.each(data.srdes, function(key, value){
				$('<tr>').append(
						$('<td>').text(rowCount++),
						$('<td>').text(value.elementName),
						$('<td>').text(value.phi),
						$('<td>').text(value.length),
						$('<td>').text(value.width),
						$('<td>').text(value.height),
						$('<td>').text(value.materialName),
						$('<td>').text(value.quantity),
						$('<td>').text(value.elementUnit),
						$('<td>').text(value.note),
						$('<td>').html('<div class="dropdown">' + 
				        		   '<button class="btn btn-primary dropdown-toggle" type="button"' +
				        		   ' data-toggle="dropdown">' + data.actionBtn +
				        		   '<span class="caret"></span></button><ul class="dropdown-menu">' +
				        		   '<li><button type="button" class="btn btn-info" data-toggle="modal" ' +
				        		   'data-target="#updateStockRequisitionDetails" id="update" ' + 
				        		   'data-id="' + (rowCount+1) + '" formnovalidate>' + data.updateBtn + 
				        		   '</button></li><li><input type="button" class="btn btn-warning" ' +
				        		   'id="delete" data-id="' + (rowCount+1) + '" ' + 
				        		   'formnovalidate value="' + data.deleteBtn + '" /></li></ul></div>')
				        		   ).appendTo('#detailsTable');
				console.log(data);
			});
		}
	},
	error: function(){
		alert("Cannot get data from database!");
	}
});
};`

Lần đầu khi bấm Xóa thì rất bình thường, không bị lỗi gì cả, nhưng sau khi load lại bảng thì event onclick không còn hoạt động được nữa. :frowning: Mình check trên console thì thấy rõ ràng không nhảy vào được hàm onclick, mặc dù sau khi reload lại thì id mình vẫn cung cấp đầy đủ. Mong mọi người giúp đỡ. Thanks.

Sau khi reload thì bạn phải cho nó listen sự kiện click lần nữa :slight_smile: Vì element cũ đã bị xóa

1 Like

Cảm ơn gợi ý của bạn, Mình fix được rồi, mình cứ tưởng jQuery nó giống C# ở chỗ tạo event rồi thì xài bao nhiêu lần cũng được.

Nó giống mà bạn. 1 event dùng bao nhiêu lần cũng được. Nhưng mà khi reload thì element cũ bị xóa đi thay bằng element mới nên event bị xóa theo :slight_smile: . Bạn không học Javascript trước khi dùng jQuery ?

Mình có học qua Javascript rồi nhưng chắc lúc trước áp dúng không có đụng tới những trường hợp cần sử dụng lại nhiều lần 1 event thế này :slight_smile: Để mình nghiên cứu lại thêm. Thanks bạn.

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?