jQuery .on ('change', function () {} no se activa para entradas creadas dinámicamente

147

El problema es que tengo algunos conjuntos de etiquetas de entrada creados dinámicamente y también tengo una función que debe activarse cada vez que se cambia un valor de entrada.

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

Sin embargo, .on('change')no se activa para ninguna entrada creada dinámicamente, solo para elementos que estaban presentes cuando se cargó la página. Desafortunadamente, esto me deja en un aprieto, ya que .onestá destinado a ser el reemplazo de.live() y .delegate()todos los cuales son envoltorios para .bind(): /

¿Alguien más ha tenido este problema o sabe de una solución?

javascript jquery

— Mella
fuente

272

Debe proporcionar un selector para la onfunción:

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

En ese caso, funcionará como esperaba. Además, es mejor especificar algún elemento en lugar del documento.

Lea este artículo para una mejor comprensión: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

— Artem Vyshniakov
fuente

1

¡Usted es maravilloso! Yo también estaba teniendo este problema. Nunca pensé que podría agregar el selector como un segundo parámetro.

— Tomatrox

1

sí, como se señaló, es bueno limitarse a algún elemento en lugar de a todo el documento, en el caso de que la parte dinámica esté después de algún div, use ese, por ejemplo: $ ('# ajax_table'). on ('change', 'input ', function () {...

— Raul Gomez

3

Si mi elemento se creó dinámicamente, ¿cómo puedo trabajar con él más adelante? $ esto me da un objeto vacío.

— aleXela

Funciona a las mil maravillas. Muchas gracias ! Además, podemos usar .once () para evitar agregar dos veces la misma lógica;)

— benftwc

Sintaxis alternativa: $(document).on({ change: handleChange }, 'input');más la función const handleChange = (event) => { $(event.target)...Es bueno evitar lo problemático this.

— Dem Pilafian

23

Utilizar este

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

— Dixon
fuente

Para su información, @enrey se refería $('#id')en el código en lugar de'#id'

— Loaf

14

Puede aplicar cualquier enfoque:

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

3

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

— Azhar
fuente

11

hmm ... ¿qué tal un poco de explicación del fragmento?

— kleopatra

12

Esto todavía no funcionará con elementos creados dinámicamente, ya que intenta vincularse en la carga de documentos. Sin embargo, la respuesta de @ArtemVyshniakov se une al documento, y cuando algo en uno de los elementos cambia, se dispara, debido al segundo argumento, puede apuntar al elemento requerido. (lo que significa que cuando se activa la función, verificará si la fuente del disparador coincide con el segundo parámetro)

— FullyHumanProgrammer

Este código no funcionará hasta que use el DOM precargado. Debe

— benftwc

2

Solo para aclarar alguna posible confusión. Esto solo funciona cuando un elemento está presente en la carga DOM:

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

Cuando un elemento se carga dinámicamente más tarde, puede usar:

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

— dynero
fuente

2

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

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

— Vinod Kumar
fuente

1

Puede usar el evento 'input', que ocurre cuando un elemento recibe la entrada del usuario.

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

documentación de w3

— Alex
fuente

1

puedes usar:

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

Funciona conmigo

— Yehia Fouad
fuente