The program has two javascript functions to generate a table (generateTable
) and delete one selected row (deleteOneRow
).
generateTable
function generates a table based on server data. Each row is in the following format:
<tr><td><span class="desc">aaa</span><a href="#delete_choice" class="delete-choice">Delete</a></td> </tr>
Basically, each row is some text followed by a 'delete' link.
When the script finish the table generation, it calls $(".delete-choice").click(deleteOneRow)
to bind click to the event handler.
In the event handler function deleteOneRow
, it first simply deletes all the rows in the table. Then call generateTable
again to display the remaining data entries. Code structure is like follows:
function deleteOneRow() {
var choiceIdx = ... //get index
$(".delete-choice").unbind('click');
CurrentChoices.splice(choiceIdx, 1); // remove the entry from the array
$("#problem-choice-table tr").each(function(){ // delete the DOM entries
$(this).remove();
})
generateTable();
}
If the table have two rows, after clicking the delete link in the 1st row, the first row was deleted. Then it generates a table with the 2nd row moving to the 1st. However, the deleteOneRow
is called again, then the 2nd row is removed eventually.
I guess this is due to event is fired multiple times. I tried unbind, stopPropagation, etc. Nothing works.