fnDrawCallBack fnDraw undesired results while posting

joelones

Hey guys,
I am using datatables and I am running a callback function after the table loads via the "fnDrawCallBack":, the function I'm running is loadModalLinks, please see here http://pastebin.com/A4DZ08wt or below.
1) I would like that every time an "X" is clicked for that row a modal window is presented prompting the user to confirm deletion of that object. Once deleted I would run the fnDraw (redraw method) on the datatable object to refresh the rows.

2) It does work for the first deletion, unfortunately every subsequent deletion it posts to the backend the previous deleted ones in an accumulative fashion, I guess there's somewhat of a recursive nature to this, where fnDrawCallBack calls fnDraw and so on

Please help

[code]
function loadModalLinks() {
// Get a reference to the datatable
var oTable = $(this).dataTable();

$('a[href^="/patients"][href*="delete/"]').on('click', function(e){
// Get the URL from the link
var url = $(this).attr('href')

// Prevent default action
e.preventDefault();

// Prepare csrftoken
var csrftoken = getCookie('csrftoken');
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});

var onDelete = function (e) {
e.preventDefault();
$.post(url, function(data) {
console.log(url);
if (data.result == "ok"){
//alert("data deleted successfully");
oTable.fnDraw(false);
} else {
// handle error processed by server here
alert("smth goes wrong");
}
}).fail(function() {
// handle unexpected error here
alert("error");
}).always(function () {
$('#PatientConfirmDeleteModal').modal('hide');
});
}

$('#PatientConfirmDeleteModal form').submit(onDelete);

// Show the modal
$('#PatientConfirmDeleteModal').modal('show');
});
}
[/code]