Question

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

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

});

我无法触发此事件：

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

Answer 1

您的代码似乎正常工作，请参阅：HERE，但不应插入带有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 */
});

<强>更新

由于firefox错误，代码无法在Firefox中运行，或者根据需要调用它。要使此代码正常工作，您可以执行以下操作，向表中添加ID或ID或某种标识符，将新行包装到表单中，而不是将表单包装在行中，并使用jQuery insertAfter方法注入新的在DOM中形成。

请在此处查看更新的示例：HERE，代码应与此类似：

$("#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 */
});

Answer 2

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

<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>");
});

Answer 3

如果您正在使用ajax来电，则可以将submit button更改为simple button并将方法绑定到该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 */ }); });后，您必须绑定方法。

event binding

我还没有尝试，但可能会将control generation method移动到{{1}}之后或之后。

JQuery：动态表单不会提交

3 个答案: