@3nrlc: Es perfectamente válido. El método .html() puede aceptar una función. La función debe retornar un texto html para que el método lo utilice.
@alex_ore: El problema es claro. La función para el evento "click" se la asignás sólo a los elementos que existen ese momento. Los elementos nuevos no tienen por qué heredar ese tipo de cosas. Sin embargo jQuery tiene el método .delegate(), que sirve para justamente eso:
Código HTML:
Ver original<!DOCTYPE html>
div { color:blue; font-size:18px; }
<script src="http://code.jquery.com/jquery-latest.js"></script> <li><a href="#" >Inicio
</a></li> <li><a href="#" >Prductos
</a></li> <li><a href="#" >Catalogo
</a></li>
<button id="nombre" name="" title="nose" >Gen valor
</button>
$(document).ready(function(e) {
$('#nav2').delegate('li a','click',function(e){
alert('Funciona el evento');
$("#nav2").html( function (index, html) {
return "
<ul id='2'> <li><a href='#'>Precios
</a></li><li>" + "
<a href='#' >El mas vendido
</a></li> <li><a href='#' >Mi carrito
</a></li></ul>";
}) ;
e.preventDefault();
});
});
.delegate() debe ser asignado a un elemento
contenedor de los elementos a los que querés asignar el evento. El primer parámetro es el selector dentro de ese contenedor, el segundo el evento y el tercero la función.
Ahora los elementos nuevos también tienen la función asignada al evento.