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