"en" no se une a los elementos

Question

Mi HTML

<div>  
    <span class="more-available" data-completeMessage="This is the complete message you see after clicking more">Hello</span>​ 
</div> 

añade dinámicamente agrego una etiqueta de anclaje hasta el extremo de forma dinámica y luego quiero adjuntar un controlador de clic a la etiqueta de anclaje. Así que hago esto

$(document).ready(function() { 

    //Attach future proof click event to an anchor tag 
    $('a.more').on('click', function() { 
     var $parent = $(this).parent(); 
     $parent.text($parent.data('completemessage')); 
    }); 

    //Add the anchor tag 
    $('span.more-available').append($('<a class="more">...more</a>')); 
});;​ 

Esto no funciona. Si reemplazo "on" por "live" funciona. (Pero en vivo es depreciado)

Sé que puedo hacer esto

$(document).ready(function() { 

    $('div').on('click','a.more', function() { 
     var $parent = $(this).parent(); 
     $parent.text($parent.data('completemessage')); 
    }); 

    $('span.more-available').append($('<a class="more">...more</a>')); 
});;​ 

y funciona, pero mi pregunta es ...

que estaba equivocado al suponer que "sobre" proporciona todas las funcionalidad de live? ¿"On" no se une a los elementos futuros? Es este comportamiento correcto, o estoy haciendo algo mal.

violín: http://jsfiddle.net/arishlabroo/pRBke/5/

Answer 1

on() es sólo un ligante que permite la delegación de destino. Es más un reemplazo para delegate() que para live().

$('foo').live('click',fn); es esencialmente $(document).on('click','foo',fn);

Con esto en mente, simplemente enlazar el evento de clic a la envoltura matriz constante y delegar a su objetivo, así:

$('span.more-available').on('click', 'a.more', function(){ 
    var $parent = $(this).parent(); 
    $parent.text($parent.data('completemessage')); 
}); 

Answer 2

usarlo como más adelante,

$('span.more-available').on('click', 'a.more', function() { 
    //..your code 
}); 

no se puede simplemente reemplazar reemplazar .live con .on lugar que necesita para obligar a la manejador al elemento padre con el selector específico, lo que significa que el mango se delegará cuando se desencadene el evento para el selector correspondiente. En la parte superior, usted está agregando un oyente al span.more-available que ejecutará el controlador solo cuando se active el selector coincidente a.more.

En resumen siga los dos pasos para reemplazar .live con .on,

1. Encuentra los elementos primarios más cercanos a las que se añadirá el elemento dinámicamente.
2. Vincula el controlador al elemento principal con el selector de elementos dinámicos como segundo argumento.

Answer 3

Según el jQuery documentation para el método $.live():

Como de jQuery 1.7, es obsoleto el método .live(). Use .on() para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() en preferencia a .live().

La documentación para $.live() va más allá de mostrarnos los métodos y sintaxis para usar con los sucesores de este método:

Reescribiendo el método .live() en términos de sus sucesores es sencillo; éstas son las plantillas para llamadas equivalentes para todos los métodos de fijación de tres eventos:

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

Si estás usando jQuery 1.7 o superior, utilizar el método $.on() como se indica anteriormente.