Convertir live () en on () en jQuery

Mi aplicación ha agregado dinámicamente menús desplegables. El usuario puede agregar tantos como sea necesario.

Tradicionalmente estaba usando el live()método de jQuery para detectar cuándo se editó uno de estos menús desplegables change():

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

A partir de jQuery 1.7, he actualizado esto a:

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

Mirando los documentos, eso debería ser perfectamente válido (¿verdad?), Pero el controlador de eventos nunca se activa. Por supuesto, he confirmado que jQuery 1.7 está cargado y ejecutándose, etc. No hay errores en el registro de errores.

¿Qué estoy haciendo mal? ¡Gracias!

La ondocumentación indica (en negrita;)):

Los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en la página en el momento en que su código realiza la llamada .on().

Equivalente a .live()sería algo así como

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

Aunque es mejor si vincula el controlador de eventos lo más cerca posible de los elementos, es decir, de que un elemento esté más cerca en la jerarquía.

Actualización: al responder otra pregunta, descubrí que esto también se menciona en la .livedocumentación :

Reescribir el .live()método en términos de sus sucesores es sencillo; Estas son plantillas para llamadas equivalentes para los tres métodos de conexión de 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+

Además de la respuesta seleccionada,

Puerto jQuery.livea jQuery 1.9+ mientras espera que su aplicación migre. Agregue esto a su archivo 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: La función anterior no funcionará desde jQuery v3 comothis.selector se elimine.

O puede usar https://github.com/jquery/jquery-migrate

Acabo de encontrar una solución mejor que no implica la edición de código de terceros:

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

Instale el paquete jQuery Migrate NuGet en Visual Studio para solucionar todos los problemas de versiones. La próxima vez que Microsoft actualice sus discretos módulos de validación y AJAX, tal vez intente sin el script de migración nuevamente para ver si resolvieron el problema.

Como jQuery Migrate es mantenido por la Fundación jQuery, creo que este no es solo el mejor enfoque para las bibliotecas de terceros y también para recibir mensajes de advertencia para sus propias bibliotecas que detallen cómo actualizarlas.

Además de las respuestas seleccionadas,

Si usa Visual Studio , puede usar Regex Reemplazar .
En Edición> Buscar y reemplazar> Reemplazar en archivos
o Ctrl + Shift + H

En la ventana emergente Buscar y reemplazar, configure estos campos

Encuentra qué: \$\((.*)\)\.live\((.*),
Reemplazar con: $(document.body).on($2,$1,
En las opciones de búsqueda, marque "Usar expresiones regulares"

jquery verision xxxjs editor abierto, encontrar jQuery.fn.extend

agregar código

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

Ejemplo: jquery-2.1.1.js -> línea 7469 (jQuery.fn.extend)

Vista de imágenes de ejemplo