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

我有一个带有输入字段的表单，我正在添加另一个带有按钮的输入字段。我对每个输入字段的“keyup”事件都有一个函数调用，但该函数调用仅对第一个输入字段有效，动态添加的输入字段不会触发该函数。如何使其与所有输入字段一起工作

我做了一个实验来看看我的例子

以下是我的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>

序列号0：
添加另一个字段

以下是我的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);

}

$（文档）.ready（函数（）{
$（'input[id^=serial]'）。在（“keyup”，validateSerial）上；
$（“#添加序列号”）。单击（函数（）{
$（“#serials”）.append（“”）+
'div'）.size（）+'“>'+
'Serial'+$（“#serials>div”）.size（）+'：div“.size（）+'”+
'id=“serial”+$（“#serials>div”）.size（）+'”+
'' +
'');
});
});
函数validateSerial（）{
var inputFieldNumber=$（this.attr（'id'）.match（/\d+$/）；
警报（输入字段编号）；
}

您需要在此处使用事件委派模型

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

---

您需要在这里使用事件委派模型

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

试试这个：

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

}

$（文档）.ready（函数（）{
$（'input[id^=serial]'）。在（“keyup”，validateSerial）上；
$（“#添加序列号”）。单击（函数（）{
$（“#serials”）.append（“”）+
'div'）.size（）+'“>'+
'Serial'+$（“#serials>div”）.size（）+'：div“.size（）+'”+
'id=“serial”+$（“#serials>div”）.size（）+'”+
'' +
'');
$（'input[id^=serial]'）。在（“keyup”，validateSerial）上；
});
});
函数validateSerial（）{
var inputFieldNumber=$（this.attr（'id'）.match（/\d+$/）；
警报（输入字段编号）；
}

试试这个：

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

}

$（文档）.ready（函数（）{
$（'input[id^=serial]'）。在（“keyup”，validateSerial）上；
$（“#添加序列号”）。单击（函数（）{
$（“#serials”）.append（“”）+
'div'）.size（）+'“>'+
'Serial'+$（“#serials>div”）.size（）+'：div“.size（）+'”+
'id=“serial”+$（“#serials>div”）.size（）+'”+
'' +
'');
$（'input[id^=serial]'）。在（“keyup”，validateSerial）上；
});
});
函数validateSerial（）{
var inputFieldNumber=$（this.attr（'id'）.match（/\d+$/）；
警报（输入字段编号）；
}

检查这把小提琴

检查这把小提琴

---

非常感谢，它起作用了。：）你能解释一下你的函数调用和我的函数调用有什么区别吗？@emjay当你使用

$（'input[id^=serial]'时）

若要注册事件处理程序，则在执行代码时，它将仅将处理程序注册到dom中存在的元素。我认为您的意思是“委派”而不是“传播”，即使是委派的事件使用propagation@emjay使用上述模型时，事件处理程序将添加到

$（“#serials”）

，但是，由于js事件模型将事件传播到父元素，子元素中的任何键控都将传播到该元素，然后jQuery执行测试以查看目标是否符合在第二个参数中传递的选择器（谢谢澄清）：祝您有个美好的一天！非常感谢，它起作用了。：）你能解释一下你的函数调用和我的函数调用有什么区别吗？@emjay当你使用

$（'input[id^=serial]'时）

若要注册事件处理程序，则在执行代码时，它将仅将处理程序注册到dom中存在的元素。我认为您的意思是“委派”而不是“传播”，即使是委派的事件使用propagation@emjay使用上述模型时，事件处理程序将添加到

$（“#serials”）

，但是，由于js事件模型将事件传播到父元素，子元素中的任何键控都将传播到该元素，然后jQuery执行测试以查看目标是否符合在第二个参数中传递的选择器（谢谢澄清）：祝您有个美好的一天！