如何使用Jquery将输入类型的submit元素追加到表上并进行绑定

Question

我正在尝试附加一个具有表单和输入类型submit的表行。通常，我的循环是这样的：

@foreach (var item in Model)
{
using (Html.BeginForm("Edit", "User"))
{
<tr>
<input type="hidden" name="Id" value="@item.Id" />
<td>
@Html.DisplayFor(modelItem => item.Email)
@Html.HiddenFor(modelItem => item.Email, new { name = "Email" })
</td>

<a href="@Url.Action("Edit", new { Id = item.Id })">Edit</a>
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
}
}

现在，在我的AJAX调用中，我需要在这一行表中添加额外的用户，我通常是这样做的：

$.ajax({
type: "POST",
url: 'URL',
dataType: 'json'
}).done(function (data) {
if (data.status == 'True') {
var usrObj = data.uobj;
$(function () {
var table = $('#tblUsers tbody');
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody')
.append('<tr><form action="/User/Edit" method="post">' +
'<input type="hidden" name="Id" value=' + usrObj[i].Id + '>' +
'<td>' + usrObj[i].Email + '</td>' +
"<td><a href='" + "/User/Edit/" + usrObj[i].Id + "'" + "></i>Edit</a>" + 
`<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button></td>` +
'</form></tr>');
}
}                
});

现在发生的情况是，附加的链接运行良好，因为运行所需的所有链接都已在其属性上设置：

<a href='" + "/UserM/Edit/" + usrObj[i].Id + "'" + "></i>Edit</a>

这是我很难提交表格：

<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button>

我尝试在下面添加以下代码，但仍然没有发生任何事情，确认对话框弹出，但单击确定按钮后，什么都没有发生。表单未提交。但是其他行在追加之后运行良好。

这是我试过的，但所有这些都不起作用。

$(function () {
$(document).on('submit', 'form', function (event) {
$(this).submit();
});
});          

我想我添加表行的方式是个问题，但我不太确定。

Answer 1

当前jquery代码中的问题是，当您在表内追加新行时，它超出了tr标记，这就是表单提交不起作用的原因。相反，您可以将表单标记放在td标记中，并将需要传递给后端的输入字段放在其中，这样表单就可以使用其中的按钮获得触发器。

演示代码 :

//this is for demo :)
var usrObj = [{
"Email": "cdcdc",
"Id": 11
}, {
"Email": "cdcdc2",
"Id": 12
}]
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody').append('<tr><td>' + usrObj[i].Email + '</td>' + "<td><form action='/User/Edit' method='post'><a href='" + "/User/Edit/" + usrObj[i].Id + "'" + "></i>Edit</a>" + `<button type='submit' name='btnDisable' onclick="return confirm('Disable this?')";>Disable</button>` + '<input type="hidden" name="Id" value=' + usrObj[i].Id + '/></form>' + "</td></tr>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblUsers">
<tbody>
<form>
<tr>
<input type="hidden" name="Id" value="1" />
<td>
frg
</td>
<td>
<a href="@Url.Action(" Edit ", new { Id = item.Id })">Edit</a>
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
</form>
<form>
<tr>
<input type="hidden" name="Id" value="2" />
<td>
ckwlkev
</td>
<td>
<a href="@Url.Action(" Edit ", new { Id = item.Id })">Edit</a>
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
</form>
</tbody>
</table>

Answer 2

请使用更新您的ajax代码

for (var i = 0; i < usrObj.length; i++) {    
$('#tblUsers').find('tbody').append('<tr><form action="/User/Edit" method="post">' +
'<input type="hidden" name="Id" value=' + usrObj[i].Id + '>' +
'<td>' + usrObj[i].Email + '</td>' +
'<td><a href="' + '/User/Edit/' + usrObj[i].Id + '"></i>Edit</a>' + 
'<button type="submit" name="btnDisable" id = "btnDisable" onclick="return confirm('Disable this?')";>Disable</button></td>' +
'</form></tr>');
} 

此外，$(document).on具有比$('form.remember').on('submit')低得多的性能。它现在必须侦听文档中的所有提交事件。如果可能的话，限制范围比监听文档要好得多