1

私はテーブルを持っています、そして私はその中の何かを変える必要があります。これを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を監視し、コンテンツ文字列と比較します。

http://jsfiddle.net/Es8fQ/3/

4

1 に答える 1

6

無効なHTMLを追加しています。

TD要素はテーブル内にのみ存在でき、フォーム要素の直接の子になることはできません。そのため、ブラウザはフォームタグを自動的に閉じて、発生したエラーを修正しようとします。

解決策は、HTMLを追加する前に、HTMLが有効であることを確認することです。

于 2013-03-26T16:41:30.520 に答える