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

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

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

Sin embargo, el .on('change') no se activa para ningún input creado dinámicamente, solo para los elementos que estaban presentes cuando se cargó la página. Desafortunadamente, esto me deja un poco atado porque .on se supone que es 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?

Respuesta #1

Debes proporcionar un selector a la función on:

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

En ese caso, funcionará como esperabas. Además, es mejor especificar algún elemento en lugar de document.

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

Respuesta #2

Puedes usar cualquiera de varios enfoques:

$("#Input_Id").change(function(){   // 1st way
    // do your code here
    // Use this when your element is already rendered
});


$("#Input_Id").on('change', function(){    // 2nd way
    // do your code here
    // This will specifically call onChange of your element
});

$("body").on('change', '#Input_Id', function(){    // 3rd way
    // do your code here
    // It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});

Respuesta #3

Usa esto

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