179

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?

8 Answers 8

314

You should provide a selector to the on function:

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

In that case, it will work as you expected. Also, it is better to specify some element instead of document.

Read this article for better understanding: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

5
  • 1
    You are awesome! I was having this problem too. Never thought you could add the selector as a second parameter.
    – Tomatrox
    Jun 1, 2015 at 21:02
  • 1
    yeah as pointed out its good to narrow to some element instead of whole document, in the case if the dynamic part its after some div use that one, for example: $('#ajax_table').on('change', 'input', function() { ...
    – Raul Gomez
    Nov 15, 2016 at 4:51
  • 3
    If my element made dinamicaly, how can I work with it later? $this gives me empty object.
    – aleXela
    Nov 20, 2016 at 0:00
  • It works like a charm. Thanks a lot ! In addition, we can use .once() to prevent adding twice the same logic ;)
    – benftwc
    May 30, 2018 at 9:44
  • Alternate syntax: $(document).on({ change: handleChange }, 'input'); plus the function const handleChange = (event) => { $(event.target)... It's nice to avoid the troublesome this. Dec 25, 2019 at 20:57
32

You can use any one of several approaches:

$("#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
});
29

Use this

$('body').on('change', '#id', function() {
  // Action goes here.
});
1
  • 1
    FYI, @enrey was referring to $('#id') in the code instead of '#id'
    – Loaf
    Sep 14, 2017 at 1:05
8

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;
});
4
$("#id").change(function(){
    //does some stuff;
});
3
  • 12
    hmm ... how about a bit of explanation of the snippet?
    – kleopatra
    Sep 1, 2015 at 12:53
  • 12
    This still won't work with dynamically created elements, as it tries to bind on document load. The answer by @ArtemVyshniakov however binds to the document, and when something in one of the elements changes it is fired, because of the second argument it can then target the required element. (meaning that when the function fires, it will check if the source of the trigger matches the second parameter) Oct 22, 2015 at 11:57
  • This code won't work until it use the pre-loaded DOM. You have to pass the selector as document-related variable api.jquery.com/on/#on-events-selector-data
    – benftwc
    May 30, 2018 at 9:45
4

you can use:

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

It works with me.

3

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

1
  • Thank you very much! Solved 1000% my problems!
    – user
    Dec 23, 2020 at 20:36
2
$(document).on('change', '#id', aFunc);

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.