The problem is that I have some dynamically created sets of input tags and I also have a function that is meant to trigger any time an input value is changed.
$('input').on('change', function() {
// Does some stuff and logs the event to the console
});
However the .on('change')
is not triggering for any dynamically created inputs, only for items that were present when the page was loaded. Unfortunately this leaves me in a bit of a bind as .on
is meant to be the replacement for .live()
and .delegate()
all of which are wrappers for .bind()
:/
Has anyone else had this problem or know of a solution?
This question is related to
javascript
jquery
$("#id").change(function(){
//does some stuff;
});
Use this
$('body').on('change', '#id', function() {
// Action goes here.
});
You can apply any one approach:
$("#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
});
$(document).on('change', '#id', aFunc);
function aFunc() {
// code here...
}
you can use:
$('body').ready(function(){
$(document).on('change', '#elemID', function(){
// do something
});
});
It works with me.
Just to clarify some potential confusion. This only works when an element is present on DOM load:
$("#target").change(function(){
//does some stuff;
});
When an element is dynamically loaded in later you can use:
$(".parent-element").on('change', '#target', function(){
//does some stuff;
});
You can use 'input' event, that occurs when an element gets user input.
$(document).on('input', '#input_id', function() {
// this will fire all possible change actions
});
documentation from w3
Source: Stackoverflow.com