Javascript JQuery:dynamicformwon'；不要屈服

我有一个表单，可以附加到表的顶部以添加新行，但由于某些原因，我无法捕获提交事件。该行在表格顶部显示了表单输入元素

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form id='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></form></tr>");

});

---

您需要向表单添加操作属性：

<form action=""></form>

因此，您可以将代码更新为：

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form action="" id='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></form></tr>");
});

$（“#btn_addrow”）。在（“单击”，函数（）{
$（“#待定列表”）。前缀（“”）；
});

如果您使用的是

ajax

调用，那么您可以将

submit按钮更改为
simple按钮
，并将您的方法绑定到它。请记住，将控件添加到
DOM
后必须绑定该方法

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form id='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='button' id='btnSubmit' value='add row'></td></form></tr>");

$('#btnSubmit').click(function(e){  
       event.preventDefault();
       alert('test');
       /* $.ajax function will go here to save row */
    });

});

$（“#btn_addrow”）。在（“单击”，函数（）{
$（“#待定列表”）。前缀（“”）；
$（'#btnsupmit'）。单击（函数（e）{
event.preventDefault（）；
警报（“测试”）；
/*$.ajax函数将转到此处保存行*/
});
});

我还没有尝试过，但可能正在将您的
事件绑定移动到
控件生成方法
中或之后才能工作。
您的代码似乎正在工作，请参见：，但是，您应该插入带有类的表单，而不是插入带有ID的表单。ID应该始终是唯一的，因此我将这样做：

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form class='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></form></tr>");

});

$("body").on("submit", ".frm_add", function (event){
   event.preventDefault();
   alert('test');
   /* $.ajax function will go here to save row */
});

$（“#btn_addrow”）。在（“单击”，函数（）{
$（“#待定列表”）。前缀（“”）；
});
$（“正文”）。在（“提交”、“添加”功能（事件）上{
event.preventDefault（）；
警报（“测试”）；
/*$.ajax函数将转到此处保存行*/
});

更新

由于Firefox存在bug，该代码在Firefox中无法运行，或者您可以随意调用它。要使此代码正常工作，可以执行以下操作：向表中添加和ID或某种标识符，将新行包装到表单中，而不是将表单包装到行中，并使用jQuery insertAfter方法将新表单插入DOM中

请参见此处更新的示例：，代码应类似于此：

$("#btn_addrow").on("click", function () {
 $("<form class='frm_add'><tr><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></tr></form>").insertAfter($("#my_table"));

});

$("body").on("submit", ".frm_add", function (event){
   event.preventDefault();
   alert('test');
   /* $.ajax function will go here to save row */
});

$（“#btn_addrow”）。在（“单击”，函数（）{
$（“”）之后插入（$（“#我的表格”）；
});
$（“正文”）。在（“提交”、“添加”功能（事件）上{
event.preventDefault（）；
警报（“测试”）；
/*$.ajax函数将转到此处保存行*/
});
刚刚尝试添加action属性，但仍然没有成功。感谢您对类的建议。我确实检查了fiddle示例，但当单击AddRow按钮时，它没有显示警报框。似乎仍然没有触发提交事件。您使用的浏览器是什么？在测试之前，我从来没有发布过小提琴，而且它肯定在我的电脑上工作。让我看看其他浏览器，我现在用的是Chrome，我用的是firefox。我刚刚用chrome试过，fiddle的例子确实显示了警报框。我现在在firefox中试过，我发现了你的问题，这很奇怪，我可能只是放弃了表单的想法，只是使用一个普通的按钮，然后在click事件上，抓取输入值并将其放入ajax调用中。
$("#btn_addrow").on("click", function () {
 $("<form class='frm_add'><tr><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></tr></form>").insertAfter($("#my_table"));

});

$("body").on("submit", ".frm_add", function (event){
   event.preventDefault();
   alert('test');
   /* $.ajax function will go here to save row */
});