javascript - jquery dynamically created checkbox not working properly with function -

javascript - jquery dynamically created checkbox not working properly with function -

i wrote jquery dynamic generation of check box subtraction operation performed on text box value of checked check box. jquery working fine predefined checkbox not working dynamically created checkbox. tried solution "on" delegate still struck here code

html

<select class="select valid" id="destination" name="destination"> <option value="">select one</option> <option value="92">92(11)</option> <option value="923">923(12)</option> <option value="9230">9230(12)</option> <option value="9231">9231(12)</option> <option value="9232">9232(12)</option> <option value="9233">9233(12)</option> <option value="9234">9234(12)</option> <option value="9235">925(12)</option> </select> <label for="port">ports</label> <input type="text" id="port" max="128" min="1"/><br><br /> <input type='checkbox' value="5" name='ch1[]' class='checkbox'/>working fine <input type="submit" onsubmit="" value="save" id="button1" name="button1">

jquery

$(document).ready(function(){ $('#destination').change(function(){ $( ".dev" ).remove(); $( "#button1" ).before("<div class='dev' style='float:left;width:280px;'> <input type='checkbox' value='1' name='ch1[]' class='checkbox'/>not working</div>"); }); var $cbs = $('.checkbox'); function calcusage(){ var total = 0; //$("#more").val(); $cbs.each(function() { if ($(this).is(':checked')) { // total = parsefloat(total) + parsefloat($(this).val()); total = parsefloat($(this).val()); } }); $("#port").val($("#port").val()-total); if($("#port").val()<0) { alert("check port capacity"); } } //for checkboxes $cbs.click(function() { calcusage(); }); }); jsfiddle link

(*this sample code populating checkbox on ajax phone call selected destination)

your not binding new checkboxes adding.

the click event binded checkboxs have when document ready. new checkboxes not part of $cbs.

javascript jquery html5