Foros del Web - Ver Mensaje Individual - JQUERY

Dany_s · #10 (**permalink**) 23/12/2010, 22:35

Cita:

12 li con live asignarias 12 event handlers

1 nomás que delega a la raiz del documento pero en la versión 1.4 se le puede indicar un contexto delegate.

Cita:

no entiendo la diferencia entre delegate y live

Es sutíl y confusa pero con el fireQuery lo podés ver. Hace una cosa para ver estos ejemplo, bajate el plugin firebug y el firequery para ver a que elementos se le asigna eventos y de que tipo. Eso lo hice yo para ver que cosa hace porque tampoco encontré material en español y no entiendo inglés je

Entonces te muestro esto con el evento click:

Código HTML:

Ver original<html><head><script src="jquery.js"></script></head>
<body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
        <li>Cinco</li>
    </ul>
<script>
 
    $('li').click( function(){
        $(this).parent().append("<li>Li nuevo</li>");
    });
 
</script>
</body>
</html>

Fijate en la solapa html (del firebug) que cada li tiene un evento click.

Ahora lo mismo pero con delegate:

Código HTML:

Ver original<html><head><script src="jquery.js"></script>
</head><body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
        <li>Cinco</li>
    </ul>
<script>
 
    $("ul").delegate("li", "click", function(){
        $(this).remove();
    });
 
</script>
</body>
</html>

Si miras el html ves que se le asigna un evento al ul, en realidad parece que son los li quien tiene los eventos pero se le delega al 'ul' como se le indicó y es ahi donde se ve si se hizo click en el selector que indicaste que puede ser un li con alguna clase o id o que contenga algún elemento etc

Con el evento click con pocos elementos no pasa nada pero si hay miles tiene que ir uno por uno para asignarle un evento pero con delegate no porque le asigna a un elemento pero este tiene que ver en que elemento se lanzó el evento y en el click no, asi que para uno o para lo otro cada uno tiene ventajas y desventajas jeje

Pero también está live
Live hace lo mismo que delegate (delegate usa a live) pero delegate mejora lo que hace live. Fijate en firequery ves que se le asigna un evento live

Por ejemplo
SI no le indicas un contxto lo hace en la raiz del documento, con esto no se ve que tiene asignado a los li ni al ul

Código HTML:

Ver original<html><head><script src="jquery.js"></script>
</head><body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
        <li>Cinco</li>
    </ul>
<script>
 
    $('li').live('click', function(){
        $(this).remove();
    });
 
</script>
</body>
</html>

Pero en la versión 1.4 se le puede indicar un contexto

entonce esto es lo mismo que con delegate

Código HTML:

Ver original<html><head><script src="jquery.js"></script>
</head><body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
        <li>Cinco</li>
    </ul>
<script>
 
    $('li', $('ul')[0]).live('click', function(){
        $(this).remove();
    });
 
</script>
</body>
</html>

pero que pasa si tenemos 2 listas, el anterior no va a funcionar porque le indicamos el primer ul como contexto

esto tampoco funciona para indicarle el contexto

Código Javascript:

Ver original$('li', 'ul').live('click', function(){
        $(this).remove();
    });

pero si esto

Código HTML:

Ver original<html><head><script src="jquery.js"></script>
</head><body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
        <li>Cinco</li>
    </ul>
    <ul>
        <li>Uno2</li>
        <li>Dos2</li>
        <li>Tres2</li>
        <li>Cuatro2</li>
        <li>Cinco2</li>
    </ul>
<script>
 
    $('ul').each( function(){
        $('li', this).live('click', function(){
            $(this).remove();
        });
    });
 
</script>
</body>
</html>

que vendria a ser lo mismo que esto con delegate

Código HTML:

Ver original<html><head><script src="jquery.js"></script>
</head><body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
        <li>Cinco</li>
    </ul>
    <ul>
        <li>Uno2</li>
        <li>Dos2</li>
        <li>Tres2</li>
        <li>Cuatro2</li>
        <li>Cinco2</li>
    </ul>
<script>
 
    $("ul").delegate("li", "click", function(){
        $(this).remove();
    });
 
</script>
</body>
</html>

Siempre en cada uno fijate con el firequery

Y también fijate las cantidad de llamadas y tiempo, lo podes ver usando la opción perfilar

ah y el encadenamiento no funciona con live

Código HTML:

Ver original<html><head><script src="jquery.js"></script>
</head><body>
    <div>
        <ul>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
            <li>Cuatro</li>
            <li>Cinco</li>
        </ul>
    </div>
<script>
 
    $("div").children('ul').live('click', function(){
        $(this).remove();
    });
 
</script>
</body>
</html>

pero con delegate si

Código HTML:

Ver original<html><head><script src="jquery.js"></script>
</head><body>
    <div>
        <ul>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
            <li>Cuatro</li>
            <li>Cinco</li>
        </ul>
    </div>
<script>
 
    $("div").children('ul').delegate("li", "click", function(){
        $(this).remove();
    });
 
</script>
</body>
</html>