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 回答