web-dev-qa-db-fra.com

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

Le problème est que j'ai des ensembles de balises d’entrée créés de manière dynamique et que j’ai aussi une fonction destinée à 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
});

Cependant, la .on('change') ne se déclenche pour aucune entrée créée dynamiquement, mais uniquement pour les éléments présents lors du chargement de la page. Malheureusement, cela me laisse un peu dans une impasse, car .on doit remplacer les fonctions .live() et .delegate(), qui sont toutes des enveloppes pour .bind(): /

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

javascriptjquery
123
Nick

Vous devez fournir un sélecteur à la fonction on:

$(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 que le document.

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

219
Artem Vyshniakov

Utilisez ceci

$('body').on('change', '#id', function() {
  // Action goes here.
});
15
Dickson

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
});
8
Arsman Ahmad

Juste pour clarifier une confusion potentielle . Cela ne fonctionne que lorsqu'un élément est présent sur la charge 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;
});
2
dynero
$("#id").change(function(){
    //does some stuff;
});
1
Azhar Aarzoo
$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}
0
Vinod Kumar

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

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

documentation de w

0
Alex