如何使用 Jquery 将 append 输入类型提交到表上并绑定它？

Question

我正在尝试 append 一个表格行，它有一个表单和输入类型提交。 通常，这就是我的循环的样子：

@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>');
                }
            }                
    });

现在发生的事情是，附加的链接工作正常，因为 function 所需的链接已经设置在它的属性上：

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

这是我很难提交表格：

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

我尝试在下面添加以下代码，但仍然没有发生任何事情，弹出确认对话框，但是单击“确定”按钮后，什么也没有发生。 表单未提交。 但是在 append 之后其他行工作正常。

这是我尝试过的，但所有这些都不能正常工作。

  $(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') 。 它现在必须监听文档中的所有提交事件。 如果可能的话，限制 scope 比听文件要好得多