jQuery .on não funciona, mas .live faz

Como o método live () está obsoleto a partir da versão 1.7, comecei a analisar minha origem e a converter todos os manipuladores de events ao vivo para on (). Fiquei com a impressão de que a mudança seria simples e tudo funcionaria como antes; no entanto, encontrei um código que não se comporta como deveria.

Eu tenho o seguinte jQuery selecione para ligar o evento click de uma tag de tabela …

$('table.accordion-header').live("click", function ($e) { // gobs of code } 

… e funciona muito bem (ou seja, o evento de clique da minha tag de tabela é gerado mesmo após ocorrerem postagens assíncronas na página). Mas se eu mudar o código para o seguinte

 $('table.accordion-header').on("click", function ($e) { // gobs of code } 

em seguida, o evento click não é mais gerado após a ocorrência de postagens assíncronas na página. Por favor, note – o evento click funciona para qualquer postback asynchronous, mas depois não funciona mais . Então, o que estou perdendo aqui?

O equivalente a

 $('table.accordion-header').live("click", function ($e) { // gobs of code } ); 

é

 $(document).on("click", 'table.accordion-header', function ($e) { // gobs of code } ); 

Perguntas como essa foram respondidas muitas e muitas vezes, pois parece bastante comum que as pessoas não entendam como funciona a versão dinâmica de .on() . Você está usando a forma estática de .on() onde o object deve existir no momento em que você chama .on() quando você provavelmente pretende usar a forma dinâmica de .on() assim:

 $(someStaticParentObject).on("click", 'table.accordion-header', function ($e) { // code } 

.live() foi substituído por .on() porque .on() permite que você tenha um melhor desempenho especificando um object pai estático do object dynamic para append o manipulador de events ao que é mais eficiente que anexá-lo ao object de document que é o que .live() fez. Sugiro que você leia essas respostas anteriores (todas escritas por mim) para entender melhor como usar .on() . Essas respostas também incluem comentários sobre a maneira mais eficiente de usar .on() e uma breve descrição de como isso funciona:

jquery: on vs live

O jQuery.on () funciona para elementos que são adicionados depois que o manipulador de events é criado?

Como o novo método on () do jQuery se compara ao método live () no desempenho?

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

Por que não levar a delegação de events Javascript ao extremo?

Na fonte do jQuery 1.7.2, “live” está praticamente apontando para “on”, então este problema provavelmente não está relacionado à function “on”. Isso precisa ser descartado. O seletor para on pode ser um problema.

fonte jQuery:

 live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, 

Eu tive problemas em tentar atualizar meu live () para on () também, mas finalmente consegui quando alguém me mostrou como o primeiro pai ou o seletor de contexto funciona. A chave é garantir que esse primeiro elemento esteja no Document Object Model.

O modo como o $ (this) funciona com .on () também não é óbvio.

 $(document).on("click", 'table.accordion-header', function ($e) { // gobs of code } ); 

No exemplo dado acima, $ (this) em seu código de function se referiria a $ (‘table.accordion-header’) e não $ (document) como você poderia esperar.

Mais explicações aqui: .on () com $ (this)

A melhor maneira que eu posso colocar isso é como a documentação diz do jQuery nas funcionalidades .live() e .live() :

  1. No seu seletor “$ (selector)”, lance um elemento concreto que carregue com a página – não dinamicamente.
  2. Em seguida, coloque o seletor secundário no método onde “seletor” é indicado – este pode ser criado dinamicamente.
 //so this.. $('table.accordion-header').live("click", function ($e) { // gobs of code }); //becomes this.. $('table').on("click",'.accordion-header', function ($e) { // gobs of code }); 

Assumindo que “table” é carregado com a página, é claro.