problemas

alex_ore · #1 (**permalink**) 08/03/2012, 10:15

Hola que tal! tengo un problema al hacer el siguiente código.... el problema es cuando uso el .html() y lo creo un li y lo agrego se pierde el evento alguien podría ayudarme estaré agradecido:

<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="nav2">
<ul id="2">
<li><a href="#" >Inicio</a></li>
<li><a href="#" >Prductos</a></li>
<li><a href="#" >Catalogo</a></li>
</ul>
</div>

<button id="nombre" name="" title="nose" >Gen valor</button>

<script>
$(document).ready(function(e) {
$("#2 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();
}
);

);
});
</script>
</body>
</html>

#2 (**permalink**) 08/03/2012, 15:45

Me gustaría saber porque usas una función como argumento de .html() ....

Naahuel · #3 (**permalink**) 08/03/2012, 17:59

@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>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="nav2">
    <ul id="2">
        <li><a href="#" >Inicio</a></li> 
        <li><a href="#" >Prductos</a></li> 
        <li><a href="#" >Catalogo</a></li> 
    </ul> 
</div>
 
<button id="nombre" name="" title="nose" >Gen valor</button>
 
<script>
    $(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(); 
        });
    }); 
</script>
</body>
</html>

.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.