0

入力フィールドのあるフォームがあり、ボタンのある別の入力フィールドを追加しています。すべての入力フィールドの「keyup」イベントで関数呼び出しがありますが、この関数呼び出しは最初の入力フィールドに対してのみ機能し、動的に追加された入力フィールドは関数をトリガーしません。すべての入力フィールドで動作させるにはどうすればよいですか?

私の例を見るためにjsfiddleを作りました。

ここに私のHTMLコードがあります:

<form method="POST" onsubmit="return false;">
    <div id="serials">
        <div id="serial_0">
            Serial 0: <input type="text" name="serial_0" id="serial_0" />
        </div>
    </div>
    <button id="addSerial">add another field</button>
</form>

ここに私のJSコードがあります:

$(document).ready(function(){

    $('input[id^=serial]').on("keyup", validateSerial);

    $("#addSerial").click(function () {
        $("#serials").append('' +
            '<div id="serial_' + $("#serials > div").size() + '">' +
                'Serial '+ $("#serials > div").size() +': <input type="text"' + 
                'name="serial_' + $("#serials > div").size() + '"' +
                'id="serial_' + $("#serials > div").size() + '"' +
            '</div>' +
        '');
    });

});

function validateSerial(){

    var inputFieldNumber = $(this).attr('id').match(/\d+$/);
    alert(inputFieldNumber);

}
4

3 に答える 3

4

ここでイベント委任モデルを使用する必要があります

$("#serials").on("keyup", 'input[id^=serial]', validateSerial);
于 2013-07-24T09:48:29.473 に答える
0

これを試して：

$(document).ready(function(){

    $('input[id^=serial]').on("keyup", validateSerial);

    $("#addSerial").click(function () {
        $("#serials").append('' +
            '<div id="serial_' + $("#serials > div").size() + '">' +
                'Serial '+ $("#serials > div").size() +': <input type="text"' + 
                'name="serial_' + $("#serials > div").size() + '"' +
                'id="serial_' + $("#serials > div").size() + '"' +
            '</div>' +
        '');
        $('input[id^=serial]').on("keyup", validateSerial);
    });

});

function validateSerial(){

    var inputFieldNumber = $(this).attr('id').match(/\d+$/);
    alert(inputFieldNumber);

}
于 2013-07-24T09:52:03.707 に答える