如何将事件与通过jquery中的ajax生成的动态值绑定

Question

我遇到动态生成复选框的问题.我试过这样的:

<select name="model" id="model" class="" aria-invalid="false">
<option value="1">iPhone 5</option>
<option value="2">Iphone 4S</option>
<option value="3">Iphone 4</option>
</select>

基于上面选择的值,这些复选框将通过ajax生成.这是通过ajax生成的元素:

<p><input type="checkbox" id="screenguard" name="screenguard" value="20" />Cover</p>
<p><input type="checkbox" id="Charger" name="Charger" value="30" />Charger</p>
<p><input type="checkbox" id="hdphdm" name="hdphdm" value="10" />Headphone</p>

<p>
 Calculated Price: <input type="text" name="price" id="price" />
</p>

根据复选框的选择,我需要计算另一个输入框(价格)的值.这是我的Jquery函数:

$(document).ready(function () {
var $inputs = $('input[type="checkbox"]')
    $inputs.on('change', function () {
        var sum = 0;
        $inputs.each(function() {
        // iterate and add it to sum only if checked
           if(this.checked)
               sum += parseInt(this.value);
        });
        $("#price").val(sum);

    });
});

但我不知道为什么它不起作用.请给我任何建议,我做错了什么.

Answer 1

你需要像这样使用事件删除 -

$(document.body).on('change','input[type="checkbox"]', function () {