jQuery .on ('change', function () {} nie wyzwala dla dynamicznie tworzonych danych wejściowych

Problem polega na tym, że mam kilka dynamicznie tworzonych zestawów znaczników wejściowych, a także mam funkcję, która ma wyzwalać za każdym razem, gdy zmieniana jest wartość wejściowa.

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

Jednak .on('change')nie jest wyzwalany dla żadnych dynamicznie utworzonych danych wejściowych, tylko dla elementów, które były obecne podczas ładowania strony. Niestety to pozostawia mnie w pewnym kłopocie, ponieważ .onma być zamiennikiem, .live()a .delegate()wszystko to jest opakowaniem dla .bind(): /

Czy ktoś inny miał ten problem lub zna rozwiązanie?

Powinieneś podać selektor do onfunkcji:

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

W takim przypadku będzie działać zgodnie z oczekiwaniami. Ponadto lepiej jest określić jakiś element zamiast dokumentu.

Przeczytaj ten artykuł, aby lepiej zrozumieć: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Użyj tego

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

Możesz zastosować dowolne podejście:

$("#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
});

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

Tylko po to, aby wyjaśnić potencjalne zamieszanie. Działa to tylko wtedy, gdy element jest obecny podczas ładowania DOM:

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

Gdy element jest później dynamicznie ładowany, możesz użyć:

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});

$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}

Możesz użyć zdarzenia „input”, które występuje, gdy element otrzymuje dane wejściowe użytkownika.

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

dokumentacja z w3

możesz użyć:

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

Działa ze mną.