See jsfiddle for working example of issue.
http://jsfiddle.net/grdhog/Wng5a/5/
When I add a row to the table. I send it first to the server by ajax then completely rebuild the table from an ajax json call. When I delete a row I sent it first to the server by ajax then completely rebuild the table from an ajax json call.
The delete is going recursive - see console output
Click on a few rows to "delete" them and you'll see the recursion. This simplified example doesn't actually add or delete rows but hopefully you get the idea. Can you explain why I have the issue and how to resolve it please. I suspect my call to get_rows() from the delete click is part of the problem.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body><p>Turn on the Javascript console to see output:</p>
<button id="add">add new row</button>
<table id="rows">
</table>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
get_rows();
$('#add').click(function() {
// ajax call to server to add row
console.log("add row");
get_rows();
return false;
});
function get_rows(){
console.log("inside get_rows!");
$("#rows").empty();
// ajax call to return all rows
for (i=0; i < 5;i++){
var item = '<tr><td id="' + i + '" class="del_row">delete row ' + i + ' by clicking me!</td></tr>';
$("#rows").append(item);
}
$(document).on("click", ".del_row", function(){
id = $(this).prop('id');
console.log("delete row " + id);
// ajax call to delete on server
get_rows();
});
}
}); // end ready
</script>
</body>
</html>