jQuery click on a dynamically added element
<p>I created a HTML table using jQuery and I'd like to perform a click on the first link inside the 2nd row.
The generated HTML looks like this</p>

<pre><code>&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;text&lt;/td&gt;&lt;/tr&gt;
&lt;tr id="xrow22" class="xrow"&gt;&lt;td colspan="2"&gt;&lt;a&gt;0&lt;/a&gt;&lt;a&gt;1&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>The function handling clicks works well when I click the row using my mouse</p>

<pre><code>$('table').on('click', '[id^=xrow] a', function(){ ...
</code></pre>

<p>When I try to call this function from another one, it doesn't work. I used alert to see some values and surprisingly the below code alerts (2nd value should be 0)</p>

<pre><code>&lt;a&gt;0&lt;/a&gt;&lt;a&gt;1&lt;/a&gt;,,[object Object]
</code></pre>

<p>Code:</p>

<pre><code>$('table').on('click', 'tr:not(.xrow)', function(e){
  $(this).next().children('td:first-child a:first-child').click();
  alert($(this).next().children('td:first-child').html() +','+ $(this).next().children('td:first-child a:first-child').text() +','+ $(this).next().children('td:first-child a:first-child'));
});
</code></pre>