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

this question has answer here:

• event binding on dynamically created elements? 18 answers

there 2 checkboxes in page change event i'm capturing in below code:

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

but if add third checkbox group , click checkbox, above function not triggered.

i adding third checkbox group through innerhtml code 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 existing innerhtml code of existing 2 checkboxes.

use event delegation. use on method.

attach event handler function 1 or more events selected elements.

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

just update parentselector in code above , should work.

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