web-dev-qa-db-fra.com

Activer () dans () dans jQuery

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

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

$('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 (n'est-ce pas?), Mais le gestionnaire d'événements ne se déclenche jamais. Bien sûr, j’ai confirmé que jQuery 1.7 était chargé et en cours d’exécution, etc. Il n’ya pas d’erreur dans le journal des erreurs.

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

javascriptjqueryjquery-1.7
197
Jack

Les on documentation (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 l'appel à .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 documentation .live :

La réécriture de la méthode .live() en fonction de ses successeurs est simple; Il s'agit de modèles d'appels équivalents pour les trois méthodes de rattachement 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+
242
Felix Kling

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

Port jQuery.live à jQuery 1.9+ en attendant que votre application migre. 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 en tant que this.selector est retiré.

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

25
Vikrant Chaudhary

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 résoudre tous les problèmes de gestion des versions. La prochaine fois que Microsoft mettra à jour son système non intrusif AJAX et ses modules de validation, essayez de nouveau 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 aussi pour obtenir des messages d'avertissement pour vos propres bibliothèques détaillant la façon de les mettre à jour.

7
Tony Wall

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

Si vous utilisez Visual Studio, vous pouvez utiliser le Regex Replace.
Dans Édition> Rechercher et remplacer> Remplacer dans les fichiers
Ou Ctrl + Maj + H

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

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

3
Maykol Rypka