Convirtiendo live() en on() en jQuery
Mi aplicación ha agregado menús desplegables dinámicamente. El usuario puede agregar tantos como necesite.
Tradicionalmente estaba usando live()el método de jQuery para detectar cuándo se editaba uno de estos menús desplegables change():
$('select[name^="income_type_"]').live('change', function() {
alert($(this).val());
});
A partir de jQuery 1.7, actualicé 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 dice (en negrita;)):
Los controladores de eventos están vinculados únicamente 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 como
$(document.body).on('change', 'select[name^="income_type_"]', function() {
alert($(this).val());
});
Aunque es mejor si vinculas el controlador de eventos lo más cerca posible de los elementos, es decir, que un elemento esté más cerca en la jerarquía.
Actualización: mientras respondía 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 adjuntar 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,
Transfiera jQuery.livea jQuery 1.9+ mientras espera que migre su aplicación. 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 ya que this.selectorse eliminó.
O puede usar https://github.com/jquery/jquery-migrate
Acabo de encontrar una solución mejor que no implica editar código de terceros:
https://github.com/jquery/jquery-migrate/#readme
Instale el paquete jQuery Migrate NuGet en Visual Studio para que desaparezcan todos los problemas de versiones. La próxima vez que Microsoft actualice sus discretos módulos AJAX y de validación, quizás intente hacerlo nuevamente sin el script de migración para ver si resolvieron el problema.
Como jQuery Migrate lo mantiene la Fundación jQuery, creo que este no solo es el mejor enfoque para bibliotecas de terceros sino también para recibir mensajes de advertencia para sus propias bibliotecas que detallan cómo actualizarlas.
Además de las respuestas seleccionadas,
Si usa Visual Studio , puede usar Regex Reemplazar .
En Editar > Buscar y reemplazar > Reemplazar en Archivos
o Ctrl + Shift + H
En la ventana emergente Buscar y reemplazar, configure estos campos
Buscar qué: \$\((.*)\)\.live\((.*),
Reemplazar con: $(document.body).on($2,$1,
En las opciones de búsqueda, marque "Usar expresiones regulares"
