event is fired multiple times for dynamically created DOM objects
<p>The program has two javascript functions to generate a table (<code>generateTable</code>) and delete one selected row (<code>deleteOneRow</code>).</p>

<p><code>generateTable</code> function generates a table based on server data. Each row is in the following format:</p>

<pre><code>&lt;tr&gt;&lt;td&gt;&lt;span class="desc"&gt;aaa&lt;/span&gt;&lt;a href="#delete_choice" class="delete-choice"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt;
</code></pre>

<p>Basically, each row is some text followed by a 'delete' link.
When the script finish the table generation, it calls <code>$(".delete-choice").click(deleteOneRow)</code> to bind click to the event handler.</p>

<p>In the event handler function <code>deleteOneRow</code>, it first simply deletes all the rows in the table. Then  call <code>generateTable</code> again to display the remaining data entries. Code structure is like follows:</p>

<pre><code>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();    
}
</code></pre>

<p>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 <code>deleteOneRow</code> is called again, then the 2nd row is removed eventually.</p>

<p>I guess this is due to event is fired multiple times. I tried unbind, stopPropagation, etc. Nothing works. </p>
