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

Question

I am trying to append a table row which has a form and input type submit. Typically, this is what my loop looks like:

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

Now on my AJAX call, I need to add additional user here on this table row, here's how I usually do it:

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

Now what is happening is that, the appended link is working fine since everything the link that is needed to function is already set on it's attributes:

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

This is I am having a hard time submitting the form:

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

I tried adding the following code below but still, nothing is happening, the confirm dialog box is popping up, but upon clicking Ok button, nothing is happening. The form is not submitting. But the other rows are working fine after the append.

Here's what I tried, but all of these are not working fine.

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

I guess the way I appended my table row is the problem but I am not clearly sure.

Answer 1

Problem in your current jquery code was that when you were appending new rows inside table it was going outside tr tag that's the reason form submit was not working. Instead you can put form tag inside td tag and the input field as well which you need to pass to backend so that form gets trigger using button inside it.

Demo Code :

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

Please update your ajax code with

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

Also, $(document).on has much lower performance than $('form.remember').on('submit') . It now has to listen for all submit events in the document. It's much better to restrict the scope a little than listen on document, if possible