jQuery .on ('change', function () {} não é acionado para entradas criadas dinamicamente

147

O problema é que eu tenho alguns conjuntos de tags de entrada criados dinamicamente e também tenho uma função que é acionada sempre que um valor de entrada é alterado.

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

No entanto, isso .on('change')não é acionado para nenhuma entrada criada dinamicamente, apenas para itens presentes quando a página foi carregada. Infelizmente, isso me deixa um pouco confuso, pois .onserve para substituir .live()e .delegate()todos os que são invólucros para .bind(): /

Alguém mais teve esse problema ou conhece uma solução?

javascript jquery

— usuario
fonte

272

Você deve fornecer um seletor para a onfunção:

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

Nesse caso, funcionará como você esperava. Além disso, é melhor especificar algum elemento em vez de documento.

Leia este artigo para entender melhor: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

— Artem Vyshniakov
fonte

1

Você é demais! Eu também estava tendo esse problema. Nunca pensei que você poderia adicionar o seletor como um segundo parâmetro.

— Tomatrox

1

sim, como apontado, é bom restringir a algum elemento em vez de todo o documento, no caso, se a parte dinâmica estiver após alguma div usar essa, por exemplo: $ ('# ajax_table'). on ('change', 'input ', function () {...

— Raul Gomez

3

Se meu elemento foi criado dinamicamente, como posso trabalhar com ele mais tarde? $ isso me dá um objeto vazio.

— AleXela

Ele funciona como um encanto. Muito obrigado ! Além disso, podemos usar .Uma vez () para impedir a adição de duas vezes a mesma lógica;)

— benftwc

Sintaxe alternativa: $(document).on({ change: handleChange }, 'input');mais a função const handleChange = (event) => { $(event.target)...É bom evitar problemas this.

— Dem Pilafian

23

Usa isto

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

— Dixon
fonte

Para sua informação, @enrey estava se referindo $('#id')no código em vez de'#id'

— Loaf

14

Você pode aplicar qualquer abordagem:

$("#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 ... que tal um pouco de explicação sobre o trecho?

— Kleopatra #

12

Isso ainda não funcionará com elementos criados dinamicamente, pois ele tenta se ligar ao carregamento do documento. A resposta de @ArtemVyshniakov, no entanto, se liga ao documento e, quando algo em um dos elementos muda, ele é acionado, por causa do segundo argumento, ele pode direcionar o elemento necessário. (o que significa que, quando a função for acionada, ele verificará se a fonte do acionador corresponde ao segundo parâmetro)

— FullyHumanProgrammer

Esse código não funcionará até que ele use o DOM pré-carregado. Você tem que passar o seletor como variável relacionada com o documento api.jquery.com/on/#on-events-selector-data

— benftwc

2

Apenas para esclarecer alguma confusão em potencial. Isso funciona apenas quando um elemento está presente no carregamento do DOM:

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

Quando um elemento é carregado dinamicamente mais tarde, você pode usar:

$(".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

Você pode usar o evento 'input', que ocorre quando um elemento obtém entrada do usuário.

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

documentação da w3

— Alex
fonte

1

você pode usar:

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

Isso funciona comigo.

— Yehia Fouad
fonte