php - 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);

    });
});

しかし、なぜそれが機能しないのかわかりません。私が間違っていることを教えてください。