ループ内でイベントリスナーが動作しない

Question

addEventListener()関数の問題が発生しています。私は配列から変数に基づいてメニューを構築しようとしています（私はなぜこのように設定されているか説明しません）。ここで

はコードです：

function menuLoop (n) { 

    return function() { 

     menuLink (n); 

    } 

} 

さて、迷惑な部分：ここで

var _Dirt = document.getElementById("dirt"); 

_Dirt.addEventListener('mouseover', function() { menuOver(true, this, _dirtY); }, false); 
_Dirt.addEventListener('mouseout', function() { menuOver(false, this, _dirtY); }, true); 

var _DirtDiv = _Dirt.getElementsByTagName('div')[0]; 

for (nLink in Men["dirt"]) { 

    var _lnk = document.createElement('p'); 
    _lnk.className = 'menu'; 
    _lnk.innerHTML = Men["dirt"][nLink][0]; 
    _lnk.addEventListener('click', menuLoop(Men["dirt"][nLink][1]), false); 

    _DirtDiv.appendChild(_lnk); 
    _DirtDiv.innerHTML+= '<br />'; 

} 

はmenuLoop機能は、（場合にあなたは私が正しく変数権利を結合しないよという懸念しているですイベントリスナーは_Dirt要素で正常に動作していますが、_lnk要素では正常に動作していません。_lnk.onclick = function() { //something }に変更しても動作しません（実際にはonclick属性でもsどのようにDOMの中で）。

私は要素にイベントリスナも付ける別のループ関数を持っていますが、それは完璧に動作します...そしてコードは非常に似ています。フラストレーションに加えて、このコードは完璧に機能していました。私は実際には、このコードをまったく変更することを思い出していません。私はスクリプト内にブレークポイントがあるかどうかを調べるためにこの関数をコード内で分離しようとしましたが、問題は残ります。

私のコードの他の部分が必要な場合は教えてください。

Answer 1

あなたの問題は、これは基本的に文字列にそれらをシリアル化し、_DirtDivの子ノードを取る

_DirtDiv.innerHTML += '<br />'; 

である（これは、あなたのデータ構造がすべて正しいという仮定の下にある）（HTML） '<br />'を連結し、innerHTMLに割り当てます。ブラウザは文字列を解析し、対応するDOMノードを作成します。

以前に作成したDOMノードのIDは失われ、イベントハンドラも失われます。このプロセスは、以前作成したものとは異なる新しい DOMノードを破棄して作成します。

あなたがbrノードを追加したい場合は、同様にDOM操作を使用します。

_DirtDiv.appendChild(document.createElement('br')); 

---

例のノードが異なっていることを示しているクロームコンソールから：

> var node = document.createElement('div'); 
    undefined 
> node.id = 'foo'; 
    "foo" 
> document.body.appendChild(node); 
    <div id=​"foo">​</div>​ 
> node === document.getElementById('foo'); 
    true          // nodes are the same 
> document.body.innerHTML += '<br />'; 
    "... long HTML string ..." 
> node === document.getElementById('foo'); 
    false          // nodes are different