Jord123 Jord123 - 1 year ago 106
jQuery Question

jQuery click on a dynamically added element

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

<tr id="xrow22" class="xrow"><td colspan="2"><a>0</a><a>1</a></td></tr>

The function handling clicks works well when I click the row using my mouse

$('table').on('click', '[id^=xrow] a', function(){ ...

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)

<a>0</a><a>1</a>,,[object Object]


$('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'));

Answer Source

When I use $(this).next().children('td:first-child').children('a:first-child').text(); I get the expected result.