javascript - delegate - jquery on focus

Convirtiendo live() en on() en jQuery

Question

Mi aplicación ha agregado dinámicamente Dropdowns. El usuario puede agregar tantos como sea necesario.

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

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

A partir de jQuery 1.7, he actualizado esto para:

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

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

¿Qué estoy haciendo mal? ¡Gracias!

Answer 1

Acabo de encontrar una mejor solución 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 módulos de AJAX y validación no intrusivos, quizás intente sin el script de migración nuevamente para ver si resolvieron el problema.

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

Answer 2

Además de la respuesta seleccionada,

Port jQuery.live a jQuery 1.9+ mientras espera que su aplicación migre. Añade esto a tu 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 se elimina this.selector .

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

Answer 3

Además de las respuestas seleccionadas,

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

En la ventana emergente Buscar y reemplazar, establezca estos campos

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

Answer 4

Los estados de documentación (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 a .on() .

Equivalente a .live() sería algo 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, a un elemento que está más cerca en la jerarquía.

Actualización: Mientras respondía otra pregunta, descubrí que esto también se menciona en la documentación de .live :

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

Answer 5

jquery verision xxxjs editor abierto, encuentra 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