jQuery .on ('change', function () {} ne se déclenchant pas pour les entrées créées dynamiquement

147

Le problème est que j'ai des ensembles de balises d'entrée créés dynamiquement et que j'ai également une fonction destinée à se déclencher à chaque fois qu'une valeur d'entrée est modifiée. 

$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

Toutefois, le .on('change')ne se déclenche pour aucune entrée créée dynamiquement, uniquement pour les éléments qui étaient présents lors du chargement de la page. Malheureusement, cela me laisse un peu embarrassé car il .onest censé être le remplacement de .live()et .delegate()qui sont tous des wrappers pour .bind(): /

Quelqu'un d'autre a-t-il eu ce problème ou a-t-il eu connaissance d'une solution?

javascript jquery pseudo
la source

Réponses:

272

Vous devez fournir un sélecteur à la onfonction:

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

Dans ce cas, cela fonctionnera comme prévu. En outre, il est préférable de spécifier un élément plutôt qu'un document.

Lisez cet article pour une meilleure compréhension: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Artem Vyshniakov
la source
1
Tu es incroyable! J'avais ce problème aussi. Jamais pensé que vous pourriez ajouter le sélecteur comme deuxième paramètre.
Tomatrox
1
ouais, comme indiqué, il est bon de se limiter à un élément au lieu du document entier, dans le cas où la partie dynamique est après un div utilisez celui-là, par exemple: $ ('# ajax_table'). on ('change', 'input ', function () {...
Raul Gomez
3
Si mon élément a été créé de manière dynamique, comment puis-je l'utiliser plus tard? $ cela me donne un objet vide.
aleXela
Il fonctionne comme un charme. Merci beaucoup ! De plus, nous pouvons utiliser .once () pour éviter d'ajouter deux fois la même logique;)
benftwc
Syntaxe alternative: $(document).on({ change: handleChange }, 'input');plus la fonction const handleChange = (event) => { $(event.target)...C'est bien d'éviter les ennuyeux this.
Dem Pilafian
23

Utilisez ceci

$('body').on('change', '#id', function() {
  // Action goes here.
});
Dixon
la source
FYI, @enrey faisait référence $('#id')dans le code au lieu de'#id'
Pain
14

Vous pouvez appliquer n'importe quelle approche:

$("#Input_Id").change(function(){   // 1st
    // do your code here
    // When your element is already rendered
});


$("#Input_Id").on('change', function(){    // 2nd (A)
    // do your code here
    // It will specifically called on change of your element
});

$("body").on('change', '#Input_Id', function(){    // 2nd (B)
    // do your code here
    // It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});
Arsman Ahmad
la source
3 
$("#id").change(function(){
    //does some stuff;
});
Azhar
la source
11
hmm ... que diriez-vous d'un peu d'explication sur l'extrait?
kleopatra le
12
Cela ne fonctionnera toujours pas avec les éléments créés dynamiquement, car il tente de se lier lors du chargement du document. La réponse de @ArtemVyshniakov se lie cependant au document, et quand quelque chose dans l'un des éléments change, il est déclenché, en raison du deuxième argument, il peut alors cibler l'élément requis. (ce qui signifie que lorsque la fonction se déclenche, elle vérifiera si la source du déclencheur correspond au deuxième paramètre)
FullyHumanProgrammer
Ce code ne fonctionnera pas tant qu'il n'utilisera pas le DOM préchargé. Vous devez passer le sélecteur en tant que variable liée au document api.jquery.com/on/#on-events-selector-data
benftwc
2

Juste pour clarifier une confusion potentielle. Cela ne fonctionne que lorsqu'un élément est présent sur le chargement DOM:

$("#target").change(function(){
    //does some stuff;
});

Lorsqu'un élément est chargé dynamiquement ultérieurement, vous pouvez utiliser: 

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});
Dynero
la source
2 
$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}
Vinod Kumar
la source
1

Vous pouvez utiliser l'événement 'input', qui se produit lorsqu'un élément reçoit une entrée utilisateur.

$(document).on('input', '#input_id', function() {
  // this will fire all possible change actions
});

documentation de w3

Alex
la source
1

vous pouvez utiliser:

$('body').ready(function(){
   $(document).on('change', '#elemID', function(){
      // do something
   });
});

Cela fonctionne avec moi.

Yehia Fouad
la source