jQuery .on('change', function() {} not triggering for dynamically created inputs

Question

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?

Dave Powers · Accepted Answer · 2015-06-18 20:24:49Z

329

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/

edited Jun 18, 2015 at 20:24

Dave Powers

2,4332 gold badges38 silver badges39 bronze badges

answered Nov 16, 2012 at 14:53

Artem Vyshniakov

16.5k3 gold badges46 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tomatrox Over a year ago

You are awesome! I was having this problem too. Never thought you could add the selector as a second parameter.

Raul Gomez Over a year ago

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() { ...

aleXela Over a year ago

If my element made dinamicaly, how can I work with it later? $this gives me empty object.

Tarto Over a year ago

It works like a charm. Thanks a lot ! In addition, we can use .once() to prevent adding twice the same logic ;)

Pilaf T. Pilafian Over a year ago

Alternate syntax: $(document).on({ change: handleChange }, 'input'); plus the function const handleChange = (event) => { $(event.target)... It's nice to avoid the troublesome this.

JakeMc · Accepted Answer · 2021-08-13 05:16:08Z

39

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
});

edited Aug 13, 2021 at 5:16

JakeMc

5447 silver badges15 bronze badges

answered May 2, 2018 at 7:14

Arsman Ahmad

2,2791 gold badge32 silver badges37 bronze badges

Comments

Dixon · Accepted Answer · 2017-06-14 07:26:41Z

31

Use this

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

edited Jun 14, 2017 at 7:26

answered May 5, 2016 at 10:58

Dixon

3753 silver badges5 bronze badges

1 Comment

Loaf Over a year ago

FYI, @enrey was referring to $('#id') in the code instead of '#id'

dynero · Accepted Answer · 2018-04-03 06:40:56Z

9

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;
});

answered Apr 3, 2018 at 6:40

dynero

3002 silver badges5 bronze badges

Comments

Ram · Accepted Answer · 2015-09-01 14:40:51Z

4

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

edited Sep 1, 2015 at 14:40

Ram

3,09110 gold badges43 silver badges57 bronze badges

answered Sep 1, 2015 at 12:41

Azhar

971 bronze badge

3 Comments

kleopatra Over a year ago

hmm ... how about a bit of explanation of the snippet?

FullyHumanProgrammer Over a year ago

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)

Tarto Over a year ago

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

Yehia Fouad · Accepted Answer · 2020-02-06 16:01:49Z

4

you can use:

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

It works with me.

answered Feb 6, 2020 at 16:01

Yehia Fouad

517 bronze badges

Comments

Alex · Accepted Answer · 2019-08-02 11:49:01Z

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

edited Aug 2, 2019 at 11:49

answered Aug 2, 2019 at 9:03

Alex

9,78830 gold badges107 silver badges167 bronze badges

Comments

Matt Rowles · Accepted Answer · 2018-11-30 09:00:43Z

2

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

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

edited Nov 30, 2018 at 9:00

Matt Rowles

8,16021 gold badges58 silver badges89 bronze badges

answered Nov 30, 2018 at 8:15

Vinod Kumar

1,31315 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery .on('change', function() {} not triggering for dynamically created inputs

8 Answers 8

5 Comments

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related