0
"データ"というオブジェクトの配列から動的にリストを作成しています。配列の各要素について、リンク付きリストオブジェクト 'li'を作成します。このリスト は最後に "情報"と呼ばれるdivに追加されます。リンクを作成するときに、クリックすると、divの現在の内容を保存し、divの内容をクリックしたリスト項目に関する追加情報（名前と状態を表示）に変更するイベントリスナーを追加します。また、replaceWith（）関数を使用してリストを復元する 'go_back'という というボタンも追加されています。私が最初にリスト項目をクリックしたときただし、これはうまく機能動的に作成されたリンクは、replaceWith（）を使用した後で一度しか動作しません。
ul = document.createElement('ul');
ul.className = "list";
for(var i=0;i<data.length;i++)
{
var li,link,text;
li = document.createElement('li');
text = document.createTextNode(data[i].name);
link = document.createElement('a');
link.href = "#"+ data[i].name;
link.appendChild(text);
li.appendChild(link);
link.addEventListener("click", description, false);
ul.appendChild(li);
function description(){
var $saved = $('#information').clone(true,true);
$("#information").html('<p>Name: ' + data[i].name + '</p>' + '<p>State: ' + data[i].state + '</p>' + '<p><button class="btn btn-danger" id="go_back">Go Back</button></p>');
$('#go_back').on('click',function(){
$("#information").replaceWith($saved);
})
}
}
document.getElementById('information').appendChild(ul);
、すなわち、それは私が「go_back」をクリックしをクリックして リスト項目についての情報を持つdiv要素の内容を変更し、 divはリストを再度表示します。ただし、この後もリンクが機能しなくなります。私はリンクにidを割り当てることで、スタックオーバーフローで同様の問題 で提案されているように.on（）関数を試しましたが、これは機能しません（リスト項目の1つをクリックして、 。
P.S.私はリストを展開可能にして折り畳み可能にしました。そのコードは最後の行に従います。 go_backボタンは、展開した の正確な状態と折りたたまれた項目を復元できます（クローン関数でtrue、trueを渡した後）。私はreplaceWith（）の代わりに.html（）を使うときに問題があり、したがって.html（）を使わなかった。
私が間違ってやって上の任意のアイデア？