0

onClickのようなイベントリスナーを動的divに正しく追加する方法を知りたいです。これが私のスニペットです：

var $menu = new Array(2);
createDiv('yes');    

function createDiv(title) {

var $class = 'menuLink';
var $title = 'title';

for(var i=0; i<$menu.length;i++)
{
   $title = 'title';
   var newdiv = document.createElement('div');
   newdiv.setAttribute('class', $class);
   newdiv.setAttribute('id', 'item'+i);

   newdiv.addEventListener('onclick', clickHandle(newdiv.id),false);

   if (title) 
   {
     newdiv.innerHTML = $title;
   } else {
 newdiv.innerHTML = "No Title";
   }

   document.getElementById('menu').appendChild(newdiv);
   showMenu();   
 }
} 

function clickHandle(e)
{
if(e == 'item0')
{
    alert('Link is' + ' ' + e);
}else{
    alert('Another Link');
}
}

これが私の問題です。スニペットは正常に機能します。divを作成し、idの値などを追加しますが、イベントがアタッチされるとすぐにイベントが発生するため、forループがdivを作成している間、アラートウィンドウには次のように表示されます。リンクはitem0です。 、そしてこの直後にそれは言う：別のリンク。

私はこれを誤解していますか？（私はAS3でこの方法を何十億回も使用しましたが、期待される結果が得られました。クリックを待機する関数をアタッチしただけです）。私が欲しいのは、私のDivは、接続された直後に発砲するのではなく、ユーザーがクリックするのを待つことです。これに関するヒントをありがとう。ご挨拶。

追伸 IEはaddEventListenerをサポートしていませんが、IEの狂気の海に渡る前にこれを解決したいと思いますが、IEのアプローチにも感謝します。-「onclick」してaddEventListener行を「クリック」してみましたが、どちらも上記と同じ結果になりました。

4

2 に答える 2

2

交換

newdiv.addEventListener('onclick', clickHandle(newdiv.id),false);

と

(function(newdiv){
    newdiv.addEventListener('onclick', clickHandle(newdiv.id), false);
 })(newdiv);

イベントはトリガーされませんでしたがclickHandle(newdiv.id)、この呼び出しの結果をに呼び出して渡していましたaddEventListener。イベントの名前は'click'、ではなく、であることに注意してください'onclick'。さらに、変数newdivは次のループによって変更されました。そのため、変動を防ぐためにクロージャーで囲むことをお勧めします。

これを使用することもできます：

(function(newdiv){
   newdiv.onclick = function(){clickHandle(newdiv.id)};
})(newdiv);
于 2012-11-24T10:58:56.710 に答える
0

すでにjqueryを使用しているので、イベントバインディングで使用してみませんか？

クロスブラウザ互換なので、IEについて心配する必要はありません。

.click（）;を試してください。

http://api.jquery.com/click/

于 2012-11-24T11:02:10.730 に答える