JQuery 创建的表单未提交

Question

我对 Jquery 编码还很陌生，我遇到了一个我无法弄清楚原因的问题：

我有一个 table 包含按钮，单击这些按钮将允许用户编辑同一行的值：

<table border="1">
  <tr>
    <td>data1</td>  
    <td>data2</td>  
    <td>data3</td>  
    <td><input type="button" class="alter" value="Alter"></td>
  </tr>
  ...
  <tr>
    <!-- Same structure as row above -->
  </tr>
  ...
</table>

当我单击该按钮时，我希望相同的 table 行更改为：

<table border="1">
  <tr>
    <form action="" method="post">
      <td><input type="hidden" name="editData1" value="data1">data1</td>  
      <td><input type="number" name="editData2" value="data2"></td>  
      <td><input type="number" name="editData3" value="data3"></td>  
      <td><input type="submit" name="editData" value="Edit"></td>
    </form>
  </tr>
  ...
  <tr>
    <!-- Remain unchanged -->
  </tr>
  ...
</table>

我使用 Jquery 来做到这一点，如您所见：

$(document).ready(function(){

  $('.alter').click(function(){

    var data1 = $(this).closest('tr').find('td:first').text();
    var data2 = $(this).closest('tr').find('td:nth-child(2)').text();
    var data3 = $(this).closest('tr').find('td:nth-child(3)').text();

    $(this).closest('tr').html('<form action="" method="post"><td><input type="hidden" name="editData1" value="'+data1+'">'+data1+'</td><td><input type="number" name="editData2" value="'+data2+'"></td><td><input type="number" name="editData3" value="'+data3+'"></td><td><input type="submit" name="editData" value="Edit"></td></form>');


  }); 
});

问题是：

当我单击“更改”按钮时，Jquery 会自动执行 table 中的所有结构更改，插入表单、输入和提交按钮，但是当我尝试单击编辑按钮提交表单，没有任何反应。

我什至将 Jquery 在 tr 标签之间插入的 html 复制到另一个页面并测试表单是否正在提交，一切正常！

谁能帮我弄清楚为什么会这样？提前致谢！

Answer 1

HTML 在 <tr> 标签中包含 <form> 标签，然后在其中包含 <td> 标签是无效的。当您生成这些元素时，浏览器会很智能并在第一个 td 之前自动关闭表单，因此提交按钮不在表单内。

试试这个：

$(this).closest('tr').html('<td><form action="" method="post"><span><input type="hidden" name="editData1" value="'+data1+'">'+data1+'</span><span><input type="number" name="editData2" value="'+data2+'"></span><span><input type="number" name="editData3" value="'+data3+'"></span><span><input type="submit" name="editData" value="Edit"></span></form></td>')

你可能想要这样的 CSS：

tr form span {
    display:table-cell;
}

JQuery 创建的表单未提交

JQuery created form created is not submitting

html

forms

jquery

form-submit