JQuery的创建创建不提交

Question

我很新的jQuery的编码和我有，我想不通一个问题，为什么形式：

我有包含点击将允许用户在按钮的表格编辑同一行的值：即同一个表行改为

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

当我按一下按钮，我想：我使用jQuery做

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

的是，你可以看到：

$(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的自动执行该表中的所有结构性变化，插入表格，输入和提交按钮，但是当我尝试点击在编辑按钮上提交表单，没有任何反应。

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

任何人都可以帮我弄清楚为什么会发生这种情况？提前致谢！

Answer 1

在<tr>标记内有一个<form>标记，然后在其中包含<td>标记，这是无效的HTML。当你生成这些元素时，浏览器很聪明，并在第一个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; 
}