jQuery: Checked event on checkbox added later through innerHTML is not working.

Question

There are two checkboxes in my page for which the change event I'm capturing in the below code:

$(':checkbox').change(function(){
 alert('hello '+this.checked);
 });

But if I add third checkbox to that group and I click this checkbox, the above function is not triggered.

I am adding the third checkbox to the group through the innerhtml code like below:

 var text2='<li><input type="checkbox" name="vehicle" value="TRUE"/><a    href="#"> New function</a></li>';
 text1=text1+' '+ text2;
 parent.innerHTML=text1;

Note: text1 is the existing innerhtml code of existing two checkboxes.

is that worked for you ?? – Pranay Rana May 12 '15 at 12:36 — Pranay Rana, May 12 '15 at 12:36

score 1 · Answer 1 · answered May 12 '15 at 06:34

Use event delegation. Use on method.

Attach an event handler function for one or more events to the selected elements.

$('document/ParentSelector').on('change', ':checkbox', function () {
    alert('hello ' + this.checked);
});

Just update your parentSelector in the code above and it should work.

Docs: https://api.jquery.com/on

FatalError · Answer 2 · 2015-05-12T06:39:03.460

1

Use the .on() function of jQuery for run time added element:

$(document).on('change',':checkbox',function(){
 alert('hello '+this.checked);
 });

edited May 12 '15 at 06:39

answered May 12 '15 at 06:35

FatalError

560
2
18

What wrong is in it? – FatalError May 12 '15 at 06:37
It will not work for dynamically added checkboxes – Tushar May 12 '15 at 06:37
This is not event delegation, better see the others posted – Norlihazmey Ghazali May 12 '15 at 06:37
@Tushar have you tried it? it will work – FatalError May 12 '15 at 06:38
1

@FatalError Did YOU try that – Tushar May 12 '15 at 06:38
@Tushar yes, and it works – FatalError May 12 '15 at 06:39
@FatalError Come On! You updated the code in between – Tushar May 12 '15 at 06:39
Hi FatalError, I've tried this but it didnt work... – Rain May 12 '15 at 07:44

Pranay Rana · Answer 3 · 2015-05-12T09:22:59.717

0

Important point here is when you are using .on to attache event as per the below code it attach event to both static and dynamically added control , so there is no need to of function you writtne on will do the work of attached function to all element(static or dynamic).

if you are adding checkbox at runtime i.e. after page get created than you need to use .on function of jquery to attache function

$( "input[type=checkbox]" ).on( "click", countChecked );

var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};

in simple you can do this

$('document').on("change", "input:checkbox", function() {  
                alert('hello '+this.checked);});

or try

$('input:checkbox').on('change', function () {
    if (!this.checked) {

    }
});

jsfiddle for this : http://jsfiddle.net/m77sN/112/

edited May 12 '15 at 09:22

answered May 12 '15 at 06:34

Pranay Rana

175,020
35
237
263

I've tried all these options but still it didnt work. do we need change event for earlier checkboxes and on event for dynamically added checkboxes? – Rain May 12 '15 at 07:46
@Rain - can you please provide your code in jsfiddler ...http://jsfiddle.net/ – Pranay Rana May 12 '15 at 08:12
Hi Pranay, whats your mailid. I can send the file to you. – Rain May 12 '15 at 08:41
Basically I think the issue is on event is not working at all with my code even though I wrap it inside document.ready function. I tried many different ways to write the signature of this on event. $(document).ready(function() { $(document).on("change", ":checkbox", function() { $(':checkbox').on('change', function(){ $(document).on("change", "input[type='checkbox']", function() { – Rain May 12 '15 at 09:10
@Rain - you can check this its working aslo helpful for you...http://jsfiddle.net/m77sN/ – Pranay Rana May 12 '15 at 09:21
unfortunately i do not have id of the checkbox. can I use it through CSS or input type checkbox options? – Rain May 12 '15 at 11:15
@Rain - yes or you can check this http://jsfiddle.net/m77sN/112/ which is using input:checkbox ...and if do work for you please accept answer and mark as selected – Pranay Rana May 12 '15 at 11:18

score 0 · Answer 4 · answered May 12 '15 at 06:35

0

Use Event delegation in the context for adding dynamic created elements in the dom there are many examples in SO

$(document).on('change' , ':checkbox', function(){
    alert('hello '+this.checked);
 });

answered May 12 '15 at 06:35

Sudharsan S

15,336
3
31
49

jQuery: Checked event on checkbox added later through innerHTML is not working.

4 Answers4