Question

我想知道如何正确地将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中使用了这种方法的数万次预期结果，只是附加了一个等待点击的函数）。我想要的是我的Divs等待用户点击它们，而不是在连接后立即开火。感谢您对此提示的任何暗示。问候。

聚苯乙烯。 IE不支持addEventListener，但是我希望在跨越疯狂的IE之前解决这个问题，但我也会欣赏IE的方法。 - 我尝试了“onclick”并只是“点击”进入addEventListener行，两者都具有上述相同的结果。

Answer 1

替换

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);

Answer 2

因为您已经使用了jquery，为什么不在事件绑定中使用它？

它的跨浏览器兼容性，因此您不必再担心IE了

试。点击（）;

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

AddEvenLister在连接后立即触发

2 个答案: