jQuery動態創建的復選框無法正常使用功能

Question

我編寫了一個jQuery，用於動態生成復選框以及使用選中復選框的值對文本框執行的減法操作。 jQuery可以很好地使用預定義的復選框，但不能使用動態創建的復選框。 我嘗試了類似“ ON”委托的解決方案，但仍然令我震驚，我的代碼就像

的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 Your Port Capacity");
        }
    }
    //For  checkboxes
    $cbs.click(function() {
        calcUsage();
    });
});

JSFiddle鏈接

（*這是示例代碼，但我在AJAX調用中填充了選定目標的復選框）

Answer 1

您未綁定要添加的新復選框。

單擊事件僅綁定到文檔准備就緒時所具有的復選框。 您的新復選框不屬於$ cbs。

Answer 2

$(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>");
}); 
function calcUsage(){
    var total = 0; //$("#more").val();
     $('.checkbox').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 Your Port Capacity");
    }
}
//For  checkboxes
$(document).on('click', '.checkbox', function()  {
    calcUsage();
});

}）;