Activation de live () en () dans jQuery

Mon application a ajouté dynamiquement des Dropdowns. L'utilisateur peut en ajouter autant qu'il le souhaite.

J'utilisais traditionnellement la live()méthode de jQuery pour détecter le moment où l'un de ces Dropdowns était change()édité:

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

Depuis jQuery 1.7, j'ai mis à jour ceci pour:

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

En regardant les documents, cela devrait être parfaitement valide (non?) - mais le gestionnaire d'événements ne se déclenche jamais. Bien sûr, j'ai confirmé que jQuery 1.7 est chargé et fonctionne, etc. Il n'y a aucune erreur dans le journal des erreurs.

Qu'est-ce que je fais mal? Merci!

La ondocumentation indique (en gras;)):

Les gestionnaires d'événements ne sont liés qu'aux éléments actuellement sélectionnés; ils doivent exister sur la page au moment où votre code appelle .on().

Équivalent à .live()serait quelque chose comme

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

Bien qu'il soit préférable de lier le gestionnaire d'événements aussi près que possible des éléments, c'est-à-dire d'un élément plus proche dans la hiérarchie.

Mise à jour: En répondant à une autre question, j'ai découvert que cela est également mentionné dans la .livedocumentation :

Réécrire la .live()méthode en fonction de ses successeurs est simple; ce sont des modèles d'appels équivalents pour les trois méthodes de connexion d'événement:

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

En plus de la réponse sélectionnée,

Port jQuery.liveà jQuery 1.9+ pendant que vous attendez votre application à migrer. Ajoutez ceci à votre fichier 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;
        }
});

Remarque: La fonction ci-dessus ne fonctionnera pas à partir de jQuery v3 car elle this.selectorest supprimée.

Ou, vous pouvez utiliser https://github.com/jquery/jquery-migrate

Je viens de trouver une meilleure solution qui n'implique pas la modification de code tiers:

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

Installez le package jQuery Migrate NuGet dans Visual Studio pour éliminer tous les problèmes de version. La prochaine fois que Microsoft mettra à jour leurs modules AJAX et de validation discrets, essayez-le sans le script de migration pour voir s'ils ont résolu le problème.

Comme jQuery Migrate est géré par la Fondation jQuery, je pense que ce n'est pas seulement la meilleure approche pour les bibliothèques tierces et également pour obtenir des messages d'avertissement pour vos propres bibliothèques détaillant comment les mettre à jour.

En plus des réponses sélectionnées,

Si vous utilisez Visual Studio , vous pouvez utiliser le remplacement Regex .
Dans Edition> Rechercher et remplacer> Remplacer dans les fichiers
ou Ctrl + Maj + H

Dans la fenêtre contextuelle Rechercher et remplacer, définissez ces champs

Rechercher quoi: \$\((.*)\)\.live\((.*),
Remplacer par: $(document.body).on($2,$1,
Dans les options de recherche, cochez "Utiliser les expressions régulières"

jquery verision xxxjs ouvrir l'éditeur, trouver jQuery.fn.extend

ajouter du code

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

Exemple: jquery-2.1.1.js -> ligne 7469 (jQuery.fn.extend)

Exemple de vue d'images