私はテーブルを持っています、そして私はその中の何かを変える必要があります。これをajaxで実行したいのですが、ユーザーが「変更」ボタンをクリックすると、一部のフィールドが編集可能に変換され、ユーザーはそれを保存できます。コードは非常に簡単です。
$(".edit_button").click(function(event){
event.preventDefault();
var trContainer = $(this).closest('tr');
trContainer.replaceWith(content);
});
元のコードでは、$。GETを介してページをダウンロードし、それを「content」変数に格納します。構造は(簡略化されています):
<tr>
<form>
<td></td> // -- note, <td> are inside of <form>
<td></td>
</form>
</tr>
ですから、テーブルラインが変わると思います。そしてそれは変化しています!...しかし問題は、ロードされた要素のDOMが壊れていることです。すべてがフォームタグから外れました。Google Chromeコンソールを使用してDOMを監視していますが、置き換えられたDOMは(simplifed)のように見えます。
<tr>
<form></form> // -- here, why <form> is empty?
<td></td>
<td></td>
</tr>
したがって、私の入力タグはフォームにラップされていません。
ミニマルな例を作成し、チェックしてください。「変更」をクリックしてから、DOMを監視し、コンテンツ文字列と比較します。