jQuery单击动态添加的元素

Question

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><td>4</td><td>text</td></tr>
<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]

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'));
});

Answer 1

Instead of the $().on() function you can use the $().live() function. Basically when you create a new element, jquery doesn't rerun and attach the click even to it. http://api.jquery.com/live/

Answer 2

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