Insertar codigo dinámico con jQuery

[googol]

Buenas,

Me gustaría saber como podría insertar código html (concretamente una fila con un link) mediante jQuery y que javascript lo reconozca como un elemento mas.

Me explico con un ejemplo.

Yo tengo la siguiente tabla:

Código HTML:

<table>
	<tbody>
		<tr><td>elem1</td><td>elem2</td></tr>
		<tr><td>elem1</td><td>elem2</td></tr>
		<tr><td colspan="2"><a href="" class="foo">FOO</a></td></tr>
	</tbody>
</table> 

Como se puede ver, la última fila de ésta es un link en la clase "foo".

Ahora tengo este codigo jQuery:

Código:

$().ready(function() {
	$('.foo').click(function() {
		row = $(this).parent().parent().parent().children('tr:last');
		$(this).parent().parent().parent().append(row);
	});
});

Lo que hace el código es copiar la ultima fila e insertarla al final del tbody. El problema es que javascript no detecta que es codigo html (supongo que lo interpretará como un string normal).

Como puedo hacer para que la fila insertada sea dinámica con javascript (es decir, que responda al evento de click?)

Gracias!

[Shirak2]

Si la fila la insertas bien en HTML, el problema está en que la función .click() de jQuery es un .bind() simplificado, por lo que sólo funciona con los elementos que había al cargar la página.
Para poder hacer lo que necesitas, tienes que hacer una delegación en el elemento padre usando .delegate().
Si tienes jQuery 1.7 o más alto, puedes usar .on(), que dependiendo de la manera en que lo llames es un bind o un delegate.

Ejemplo:

Código Javascript:

$('tbody').on('click', '.foo', function() {
    // código
});