javascript - Script does not working for loaded element -

this question has answer here:

• event binding on dynamically created elements? 18 answers

i created form checkbox + wrapper, i.e :

<form>   <div class="input-wrapper">       <input type="checkbox" name="item[]" value="1">   </dv>   <div class="input-wrapper">       <input type="checkbox" name="item[]" value="2">   </div>   <div class="input-wrapper">       <input type="checkbox" name="item[]" value="3">   </div> </form> 

and toggle check working:

$(".input-wrapper").on("click", function () {         var $checkbox = $(this).find(':checkbox');        $checkbox.prop('checked', !$checkbox[0].checked);  }); 

but when load other checkbox ajax, i.e:

$.post(      '/my/url',      {...my data...},       function(data){            if(data != 'failed'){                //return new checkbox + wrapper , append @ end of form                 $('form').append(data);            }       }  ); 

the toggle check not working loaded/appended element.

how fix ? how create script affect element loaded 1 ?

thanks.

try slight modification:

$("form").on("click", ".input-wrapper", function () {      var $checkbox = $(this).find(':checkbox');     $checkbox.prop('checked', !$checkbox[0].checked); }); 

and let me know how goes.