JavaScript変数を隠し入力値にするときに問題が発生しました

Question

div（jquery ui）をドラッグしてサイズを変更し、位置とサイズをCSSファイルに保存できるシステムを作成しようとしています。

すでに1つのdivでシステムが動作していますが、複数のdivをサポートするようにシステムを更新しようとしたため、問題が発生しました。

出典：http://ezmundorf.110mb.com/problem.txt（これは醜いですが、私はかなりうまくいく方法を試しています）。

#update divをクリックすると、ページは空白になり、ページのソースはフォームの開始タグのみになります。 Firefoxは読み込みグラフィックを表示しているので、ページは何かをしようとしています。

隠し入力フィールドを書き込む行を削除すると、保存ボタンが表示されますが、ブラウザは何かをやり続けているので、JavaScriptに問題があります。

ここでこのような「このコードを修正してください」という質問を投稿して申し訳ありませんが、コード全体がなくても説明する方法はわかりません。

Answer 1

表示されているとおり、ページ全体が上書きされることなく、ページの読み込みが完了した後では、document.writeを使用することはできません。

次の例のように、いくつかの容器に.innerHTMLを使用する必要があります。

$('myDiv').innerHTML = '<form>...</form>'; 

またはDOMメソッドを使用します。

var form = document.createElement('form'); 
var body = document.getElementsByTagName('body')[0]; 

body.appendChild('form'); 

Answer 2

ページの読み込みが完了した後でdocument.writeを使用することはできません（イベントハンドラなど、$(document).readyを含む）。代わりに、jQueryメソッド.html(val)を使用して、既存の要素の内容を変更したり、新しい要素をjQuery manipulationの方法でDOMに挿入することができます。