如何使用 Jquery 在表上附加输入类型提交元素并绑定它？

Posted 2023-05-08

【中文标题】如何使用 Jquery 在表上附加输入类型提交元素并绑定它？

【英文标题】：How to append input type submit elements on table using Jquery and bind it?

【发布时间】：2021-06-19 18:40:25

【问题描述】：

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

@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>

我尝试在下面添加以下代码，但仍然没有任何反应，弹出确认对话框，但单击Ok按钮后，没有任何反应。表单未提交。但附加后其他行工作正常。

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

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

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

【问题讨论】：

你好，试试this 看看这是否对你有用。

@Swati 非常感谢您的帮助，它运行良好！如果您想将其发布为答案，请这样做，以便我将其标记为该问题的正确答案。

【参考方案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>

【参考方案2】：

请更新您的 ajax 代码

for (var i = 0; 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'。它现在必须监听文档中的所有提交事件。最好限制如果可能的话，范围比听文件小