jquery动态创建复选框与函数无法正常工作

时间:2014-10-07 11:24:21

标签: javascript jquery html5

我写了一个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 Link

(*这是一个示例代码,但我在选择目的地的AJAX调用上填充复选框)

2 个答案:

答案 0 :(得分:0)

您没有绑定要添加的新复选框。

点击事件只是绑定到文档准备好时的复选框。您的新复选框不属于$ cbs。

答案 1 :(得分:0)

$(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();
});

});