jquery - 动态添加表单元素的函数调用

Question

我有一个带有输入字段的表单，我正在添加另一个带有按钮的输入字段。我对每个输入字段的“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);

}

Answer 1

你需要在这里使用事件委托模型

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

Answer 2

检查这个小提琴http://jsfiddle.net/RdsFa/1/

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

Answer 3

尝试这个：

$(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);

}