Qual é a diferença entre jQuery .live () e .on ()

Vejo que há um novo método .on()no jQuery 1.7 que substitui o .live()das versões anteriores.

Estou interessado em saber a diferença entre eles e quais são os benefícios de usar este novo método.

Está bem claro nos documentos por que você não gostaria de usar o Live. Também como mencionado por Felix, .oné uma maneira mais simplificada de anexar eventos.

O uso do método .live () não é mais recomendado, pois as versões posteriores do jQuery oferecem métodos melhores que não têm suas desvantagens. Em particular, os seguintes problemas surgem com o uso de .live ():

• O jQuery tenta recuperar os elementos especificados pelo seletor antes de chamar o .live()método, o que pode ser demorado em documentos grandes.
• Métodos de encadeamento não são suportados. Por exemplo, não$("a").find(".offsite, .external").live( ... ); é válido e não funciona conforme o esperado.
• Como todos os .live()eventos são anexados ao documentelemento, os eventos seguem o caminho mais longo e lento possível antes de serem tratados.
• Chamar event.stopPropagation() o manipulador de eventos é ineficaz para interromper os manipuladores de eventos anexados na parte inferior do documento; o evento já se propagou para document.
• O .live()método interage com outros métodos de evento de maneiras que podem ser surpreendentes, por exemplo, $(document).unbind("click")remove todos os manipuladores de clique anexados por qualquer chamada a .live()!

Uma diferença que as pessoas descobrem quando mudam de .live()para .on()é que os parâmetros para .on()são ligeiramente diferentes ao vincular eventos a elementos adicionados dinamicamente ao DOM.

Aqui está um exemplo da sintaxe que usamos com o .live()método:

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

Agora que .live()está obsoleto no jQuery versão 1.7 e removido na versão 1.9, você deve usar o .on()método. Aqui está um exemplo equivalente usando o .on()método:

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Observe que estamos chamando .on()o documento e não o botão em si . Especificamos o seletor para o elemento cujos eventos estamos ouvindo no segundo parâmetro.

No exemplo acima, estou chamando .on()o documento, mas você obterá melhor desempenho se usar um elemento mais próximo do seu seletor. Qualquer elemento ancestral funcionará, desde que exista na página antes da chamada .on().

Isso é explicado aqui na documentação, mas é muito fácil de passar despercebido.

Veja o Blog oficial

[..] As novas APIs .on () e .off () unificam todas as formas de anexar eventos a um documento no jQuery - e são mais curtas para digitar! [...]

.live()

Este método é usado para anexar um manipulador de eventos para todos os elementos que correspondem ao seletor atual, agora e no futuro.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

e

.on()

Este método é usado para anexar uma função de manipulador de eventos para um ou mais eventos aos elementos selecionados abaixo é o exemplo.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

Bom tutorial sobre a diferença entre ao vivo e ao vivo

Citação do link acima

O que há de errado com .live ()

O uso do método .live () não é mais recomendado, pois as versões posteriores do jQuery oferecem métodos melhores que não têm suas desvantagens. Em particular, os seguintes problemas surgem com o uso de .live ():

1. O jQuery tenta recuperar os elementos especificados pelo seletor antes de chamar o método .live (), o que pode ser demorado em documentos grandes.
2. Métodos de encadeamento não são suportados. Por exemplo, $ (“a”). Find (“. Offsite, .external”). Live (…); não é válido e não funciona conforme o esperado.
3. Como todos os eventos .live () são anexados ao elemento do documento, os eventos seguem o caminho mais longo e lento possível antes de serem tratados.
4. Chamar event.stopPropagation () no manipulador de eventos é ineficaz para interromper os manipuladores de eventos anexados na parte inferior do documento; o evento já foi propagado para o documento.
5. O método .live () interage com outros métodos de evento de maneiras que podem ser surpreendentes, por exemplo, $ (document) .unbind (“click”) remove todos os manipuladores de clique anexados por qualquer chamada a .live ()!

para mais informações confira .. .live () e .on ()

O método .live () é usado quando você lida com a geração dinâmica de conteúdo ... como eu criei no programa que adiciona uma guia quando eu altero o valor de um Slider Jquery e desejo anexar a funcionalidade do botão Fechar a todas as guias que será gerado ... o código que tentei é ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

e funciona muito bem ...

Eu sou o autor de uma extensão do Chrome "Comment Save" que usa jQuery, e outra que usa .live(). A forma como a extensão funciona é anexando um ouvinte a todas as áreas de texto usando. live()- funcionava bem, pois sempre que o documento mudava, ele ainda anexava o ouvinte a todas as novas áreas de texto.

Mudei para, .on()mas não funciona tão bem. Ele não anexa o listener sempre que o documento é alterado - portanto, voltei a usar .live(). Acho que é um bug .on(). Apenas tome cuidado com isso, eu acho.

Tenho um requisito para identificar o evento de fechamento do navegador. Depois de fazer a pesquisa, estou fazendo o seguinte usando jQuery 1.8.3

1. Ligue um sinalizador usando o seguinte jQuery quando o hiperlink é clicado

   $ ('a'). live ('click', function () {cleanSession = false;});

2. Ligue um sinalizador usando o seguinte jQuery sempre que o tipo de botão de entrada de envio for clicado

$ ("input [type = submit]"). live ('click', function () {alert ('input button clicked'); cleanSession = false;});

1. Ligue um sinalizador usando o seguinte jQuery sempre que ocorrer o envio do formulário

$ ('formulário'). live ('enviar', função () {cleanSession = false;});

Agora, coisa importante ... minha solução só funciona se eu usar .live ao invés de. Se eu usar .on, o evento será disparado depois que o formulário for enviado, o que é tarde demais. Muitas vezes, meus formulários são enviados usando uma chamada de javascript (document.form.submit)

Portanto, há uma diferença fundamental entre .live e .on. Se você usar .live, seus eventos serão disparados imediatamente, mas se você alternar para .on, ele não será disparado a tempo