"on" non vincolante per gli elementi

Question

mio HTML

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

aggiunti dinamicamente aggiungo un tag di ancoraggio fino alla fine in modo dinamico e quindi voglio collegare un gestore di clic al tag di ancoraggio. Così faccio questo

$(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>')); 
});;​ 

Questo non funziona. Se sostituisco "on" con "live", funziona. (Ma dal vivo è deprezzato)

So che posso fare questo

$(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>')); 
});;​ 

e funziona, ma la mia domanda è ...

mi sbagliavo nel ritenere che "on" fornisce tutte le funzionalità di live? "On" non si lega agli elementi futuri? È un comportamento corretto o sto facendo qualcosa di sbagliato.

violino: http://jsfiddle.net/arishlabroo/pRBke/5/

Answer 1

on() è solo un legante che permette per la delega di destinazione. È più di una sostituzione per delegate() che per live().

$('foo').live('click',fn); è essenzialmente $(document).on('click','foo',fn);

Con questo in mente, è sufficiente associare l'evento click per l'involucro genitore costante e delegato al vostro obiettivo, in questo modo:

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

Answer 2

utilizzarlo come qui di seguito,

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

non si può semplicemente sostituire sostituire .live con .on invece è necessario associare il gestore dell'elemento padre con il selettore specifico che indica che l'handle verrà delegato quando l'evento viene attivato per il selettore di corrispondenza. In sopra, si aggiunge un listener a span.more-available che eseguirà il gestore solo quando viene attivato il selettore di corrispondenza a.more.

In breve seguire i due passaggi per sostituire .live con .on,

1. trovare gli elementi più vicini al genitore cui verrà aggiunto in modo dinamico l'elemento.
2. Associare il gestore all'elemento padre con il selettore di elementi dinamici come secondo argomento.

Answer 3

Secondo il jQuery documentation per il metodo $.live():

Al jQuery 1.7, il metodo .Live() è obsoleto. Usa .on() per allegare gestori di eventi. Gli utenti di versioni precedenti di jQuery dovrebbero usare .delegate() preferibilmente a .live().

La documentazione per $.live() va avanti per mostrarci i metodi e la sintassi da utilizzare per i successori di questo metodo:

Riscrivere il metodo .Live() in termini di suoi successori è semplice; questi sono i modelli per le chiamate equivalenti per tutti i metodi di attacco a tre eventi:

$(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+ 

Se stai usando jQuery 1.7 o superiore, utilizzare il metodo $.on() come indicato sopra.