Transformando live () em on () no jQuery

Meu aplicativo adicionou Dropdowns dinamicamente. O usuário pode adicionar quantos forem necessários.

Tradicionalmente, eu estava usando o live()método do jQuery para detectar quando um desses menus suspensos foi change()ed:

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});

No jQuery 1.7, atualizei isso para:

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});

Olhando para o Documentos, isso deve ser perfeitamente válido (certo?) - mas o manipulador de eventos nunca é acionado. Obviamente, confirmei que o jQuery 1.7 está carregado e em execução, etc. Não há erros no log de erros.

O que estou fazendo de errado? Obrigado!

A ondocumentação declara (em negrito;)):

Os manipuladores de eventos são vinculados apenas aos elementos selecionados no momento; eles devem existir na página no momento em que seu código faz a chamada .on().

Equivalente a .live()seria algo como

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

Embora seja melhor se você vincular o manipulador de eventos o mais próximo possível dos elementos, isto é, de um elemento mais próximo na hierarquia.

Atualização: Ao responder a outra pergunta, descobri que isso também é mencionado na .livedocumentação :

Reescrever o .live()método em termos de seus sucessores é direto; estes são modelos para chamadas equivalentes para todos os três métodos de anexo de evento:

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

Além da resposta selecionada,

Porta jQuery.livepara o jQuery 1.9+ enquanto você espera a migração do aplicativo. Adicione isso ao seu arquivo JavaScript.

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

Nota: A função acima não funcionará no jQuery v3 conforme this.selectorfor removida.

Ou você pode usar https://github.com/jquery/jquery-migrate

Acabei de encontrar uma solução melhor que não envolve a edição de código de terceiros:

https://github.com/jquery/jquery-migrate/#readme

Instale o pacote NuQuet do jQuery Migrate no Visual Studio para eliminar todos os problemas de versão. Da próxima vez que a Microsoft atualizar seus módulos discretos de AJAX e validação, talvez tente novamente sem o script de migração para verificar se eles resolveram o problema.

Como o jQuery Migrate é mantido pela jQuery Foundation, acho que essa não é apenas a melhor abordagem para bibliotecas de terceiros e também para receber mensagens de aviso para suas próprias bibliotecas, detalhando como atualizá-las.

Além das respostas selecionadas,

Se você usa o Visual Studio , pode usar o Regex Replace .
Em Editar> Localizar e substituir> Substituir em arquivos
ou Ctrl + Shift + H

No pop-up Localizar e substituir, defina esses campos

Encontre o que: \$\((.*)\)\.live\((.*),
Substitua por: $(document.body).on($2,$1,
Nas opções de localização, marque "Usar expressões regulares"

editor aberto jquery verision xxxjs, encontre jQuery.fn.extend

adicionar código

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

Exemplo: jquery-2.1.1.js -> linha 7469 (jQuery.fn.extend)

Exemplo de visualização de imagens