0

(for) を使用して複数の入力フォームを追加しています。このフォームをキーアップでチェックしたいのですが、常に最初のフォームのみをチェックします

ここにコードがあります

for (i = 0; i < 5; i++) {
    $('input[name*="morein"]').keyup(function () {
        var value = $(this).val();
        var moreincheck = $("#moreincheck");
        if (value > 60) {
            moreincheck.css('display', 'block');
            moreincheck.text("error cant add more than 60");
        } else {
            moreincheck.css('display', 'none');
        }
    }).keyup();

    $("#divTxt").append('<inputname="morein[]"  type="text" />' + '<span id="moreincheck" class="checkerror"></span>');
}
4

2 に答える 2

1

id を uniqueにするか、class を使用して、イベント バインド部分をループから切り離します。

for (var i = 0; i < 5; i++) {
  $("#divTxt")
    .append('<input name="morein[]" type="text" class="morein" />')
    .append('<span class="checkerror"></span>');
}

// bind the event handler
$('input.morein').keyup(function () {
    var $this = $(this);
    var moreincheck = $this.next('.checkerror');
    // use .length to check the length
    if ($this.val().length > 60) {
        moreincheck.text("error cant add more than 60").show();
    } else {
        moreincheck.hide();
    }
});

動作デモ。

于 2012-08-31T02:15:14.187 に答える
0

ID は一意である必要があります。（そして、あなたはその理由に気づきました）。input[name*="morein"]さらに、各反復で同じイベントハンドラーをすべてに再追加しています。

最初に要素を作成し、イベント ハンドラーをバインドし、DOM トラバーサルを使用して対応する要素を見つけることをお勧めします。例えば：

for (i = 0; i < 5; i++) {
   $('<input name="morein[]"  type="text" /><span class="checkerror"></span>').appendTo('#divTxt');
}

$('input[name*="morein"]').keyup(function () {
    var value = $(this).val();
    var moreincheck = $(this).next('span.checkerror');
    if (value > 60) {
        moreincheck.css('display', 'block');
        moreincheck.text("error cant add more than 60");
    } else {
        moreincheck.css('display', 'none');
    }
});
于 2012-08-31T02:14:10.283 に答える