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

你需要像这样使用event delegatio -

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

Answer 2

每次单击复选框“sum”都会重置为零。将其移到“更改”事件之外。

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

2 个答案: