3

javascriptを使用して動的フィールドセットを生成しています。フィールドを追加するには、次の関数を使用します（この関数は実際には複数のフィールドを追加します）

//テストを追加

function addTest() {
    var location = document.getElementById('addTestLocation');
    var num = document.getElementById('addTestCount');
    var newnum = (document.getElementById('addTestCount').value -1)+ 2;
    num.value = newnum;
    location.innerHTML += "<div id='testContainer_"+newnum+"'><label for='test_"+newnum+"'>Test name: </label><input type='text' name='test_"+newnum+"' id='test_"+newnum+"'/>&nbsp;&nbsp;&nbsp;<a href='javascript: removeTest("+newnum+")'>- Remove test</a><br/><br/><span id='addObjectLocation'></span><br/><select id='select_"+newnum+"'><option>True or False</option><option>Single choice</option><option>Multiple choice</option><option>Short definition</option><option>Fill in the blanks</option></select><input type='hidden' id='addObjectCount' value='0'/>&nbsp;&nbsp;&nbsp;<a href='javascript:addObject();'>+ add question</a><br/><br/><hr/><br/></div>";
}

追加しなければならないコードがたくさんあるので、innerHTML代わりに使用します。この方法では、マークアップが非常に短くなります。append

さて、私の問題は、フィールドを追加（または削除）するたびに、動的に生成された他のデータのすべてのデータが失われることです。どうすればこれを修正できますか？値を保存してからすべてのフィールドに追加するのは、私の場合は非常に複雑です。何か案は？

4

1 に答える 1

4

親要素のinnerHTMLを設定すると、コンテンツ全体がシリアル化されてから再解析され、プロセス内のすべての値が失われます（値は値属性にシリアル化されません）。私は3つの回避策を考えることができます：

  1. createElementを使用して外部div（testContainer）を作成し、そのinnerHTMLを設定してから、divを親要素に追加します
  2. DOMを使用してすべての要素を作成します。要素の作成を容易にするために、一連のヘルパー関数を作成するのは簡単です。
  3. これをすべて行うjQueryを使用してください。$(location).append('html goes here');
于 2010-05-13T12:53:56.580 に答える