dynamically add clickable row to table
<p>I'm trying to add rows to a table in HTML using JavaScript that are clickable. </p>

<p>Here is my codes:</p>

<p>HTML:</p>

<pre><code>&lt;table border="1" id="example" style="cursor: pointer;"&gt;
    &lt;tr&gt;
        &lt;th&gt;1&lt;/th&gt;
        &lt;th&gt;2&lt;/th&gt;
        &lt;th&gt;3&lt;/th&gt;
        &lt;th&gt;4&lt;/th&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>//clicked function
$('#example').find('tr').click( function(){
    alert('You clicked row '+ ($(this).index()) );
});

//add new row
var x=document.getElementById('example');
var new_row = x.rows[0].cloneNode(true);                      
new_row.cells[0].innerHTML = "hello";
x.appendChild( new_row );
</code></pre>

<p>The problem is that the newly added rows are clickable but won't go through the clicked function to get the alert. </p>

<p>Anyone know why? </p>
