最初のページの読み込み時に存在しない入力ボックスがいくつかあります。これらは、.clone() を介して JQuery によって作成されます。
<input type="text" class="myInputs" name="input[0]" />
<input type="text" class="myInputs" name="input[1]" />
<input id="remove" type="button" value="Remove last input">
次に、これらすべてのフィールドを合計し、結果でアラートを作成する関数を用意しました。これは、
a) 入力フィールドの onchange 関数 (チャームのように機能します) と
b) 「入力フィールドの 1 つを削除する」によって呼び出されます。 "-1 つのフィールドを削除してから、関数を再度呼び出すボタン。
$(document).ready( function() {
function calculatesum() {
var sum = 0;
var value = 0;
var error = false;
var count = new Number($("input.myInputs").length);
if(count >= 1) {
$("input.myInputs").each(function() {
if($.isNumeric($(this).val())) {
value = new Number($(this).val());
sum = sum + value;
}
else
error = true;
});
}
if(!error) alert(sum);
else alert("Error");
}
$('body').on('change', 'input.myInputs', function () {
calculatesum();
});
$('#remove').click(function () {
if (confirm("Are you sure?")) {
$('.myInputs:last').slideUp('slow', function () {
$(this).remove();
});
calculatesum();
}
return false;
});
}
ポイントは、ボタン関数を介して要素を削除した後も、(以前に削除された) 入力フィールドとその値を取得することです。
どうすればそれを防ぐことができますか?