jQuery .on ('change', function () {} non si attiva per input creati dinamicamente

147

Il problema è che ho alcuni insiemi di tag di input creati dinamicamente e ho anche una funzione che si intende attivare ogni volta che viene modificato un valore di input.

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

Tuttavia, .on('change')non viene attivato alcun input creato dinamicamente, ma solo per gli elementi presenti al momento del caricamento della pagina. Sfortunatamente questo mi lascia un po 'complicato perché .onè pensato per essere il rimpiazzo .live()e .delegate()tutti sono involucri per .bind(): /

Qualcun altro ha avuto questo problema o conosce una soluzione?

javascript jquery

— tacca
fonte

272

È necessario fornire un selettore alla onfunzione:

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

In tal caso, funzionerà come previsto. Inoltre, è meglio specificare qualche elemento anziché documento.

Leggi questo articolo per una migliore comprensione: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

— Artem Vyshniakov
fonte

1

Sei fantastico! Ho avuto anche questo problema. Non avrei mai pensato di poter aggiungere il selettore come secondo parametro.

— Tomatrox,

1

sì, come sottolineato, è utile restringere a qualche elemento anziché all'intero documento, nel caso in cui la parte dinamica sia dopo qualche div utilizzare quella, ad esempio: $ ('# ajax_table'). on ('change', 'input ', function () {...

— Raul Gomez,

3

Se il mio elemento è diventato dinamico, come posso lavorarci più tardi? $ questo mi dà un oggetto vuoto.

— Alexela,

Esso funziona magicamente. Molte grazie ! Inoltre, possiamo usare .once () per evitare di aggiungere il doppio della stessa logica;)

— benftwc

Sintassi alternativa: $(document).on({ change: handleChange }, 'input');più la funzione const handleChange = (event) => { $(event.target)...È bello evitare il fastidio this.

— Dem Pilafian,

23

Usa questo

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

— Dixon
fonte

Cordiali saluti, @enrey si riferiva al $('#id')codice anziché a'#id'

— Loaf

14

Puoi applicare qualsiasi approccio:

$("#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
fonte

3

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

— Azhar
fonte

11

hmm ... che ne dici di un po 'di spiegazione dello snippet?

— Kleopatra,

12

Questo non funzionerà ancora con elementi creati dinamicamente, poiché tenta di legarsi al caricamento del documento. La risposta di @ArtemVyshniakov si lega tuttavia al documento e quando qualcosa in uno degli elementi cambia viene generato, a causa del secondo argomento può quindi indirizzare l'elemento richiesto. (il che significa che quando la funzione viene attivata, verificherà se l'origine del trigger corrisponde al secondo parametro)

— FullyHumanProgrammer

Questo codice non funzionerà fino a quando non utilizzerà il DOM precaricato. Devi passare il selettore come variabile relativa al documento api.jquery.com/on/#on-events-selector-data

— benftwc

2

Giusto per chiarire qualche potenziale confusione. Funziona solo quando un elemento è presente sul caricamento DOM:

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

Quando un elemento viene caricato in modo dinamico in un secondo momento, puoi utilizzare:

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

— dynero
fonte

2

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

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

— Vinod Kumar
fonte

1

È possibile utilizzare l'evento 'input', che si verifica quando un elemento ottiene l'input dell'utente.

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

documentazione da w3

— alex
fonte

1

Puoi usare:

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

Funziona con me

— Yehia Fouad
fonte