将事件添加到动态创建的元素中的奇怪结果

此代码将运行（至少在Firefox中），并将通过名称前面带有_来创建并附加onmouseover事件处理程序，以指定具有子菜单的三个元素。它不会将处理程序添加到不应该有的处理程序中。将事件添加到动态创建的元素中的奇怪结果

如果我通过Firebug追踪，一切似乎都正常工作;这是处理程序附加正确的ID和字幕。

在浏览器中，正确的元素具有触发的mouseover事件。然而，尽管没有事件处理程序甚至连接到“其他”，但在每种情况下传递给该事件处理程序的参数都是“6”和“其他”。我想我已经确定了一切正确的范围，所以我不明白为什么会发生这种情况。

我在这里错过了什么？

谢谢！

//父元素，我将在添加子元素

var navdiv = document.getElementById('nav') 

var navarray = ['','Home', '_Books', '_Pictures', '_Characters','Other']

//水平菜单

var nnav = navarray.length 

for (var ii = 1; ii < nnav; ii++) 
{ 

// get title and determine whether it has a submenu 
var subflag = false 
var navtitle = navarray[ii] 
var firstchar = navtitle[0] 
if (firstchar == '_') 
{ 
    navtitle = navtitle.substring(1, navtitle.length - 1) 
    navtitle += '*' 
    subflag = true 

} 


// Create Div 

var naventry = document.createElement('div') 
var navid = 'nav' + navarray[ii] 
naventry.setAttribute('id', navid) 
naventry.setAttribute('class', 'navitem') 
// Create Link 
var lnk = document.createElement('a') 
lnk.setAttribute('href', navarray[ii] + '.html') 
if (subflag) // will have a submenu 
{ 
    lnk.onmouseover = function() { dropmenu(ii, navtitle) } 
} 

var txtnode = document.createTextNode(navtitle) 
lnk.appendChild(txtnode) 

naventry.appendChild(lnk) 
navdiv.appendChild(naventry) 
lnk = null 
} 

function dropmenu(which, ntitle) 
{ 
alert('In drop menu: Id = ' + which + ' ' + ntitle) 
return false; 
}

来源

2012-06-24 Mona Everett

dropmenu(ii, navtitle)是原因，因为ii等于nnav当循环终止。您需要拍下ii的快照，并将其传递给dropmenu。

来源

2012-06-24 02:22:31 akonsu

改变这一状况，

if (subflag) // will have a submenu 
{ 
    lnk.onmouseover = function() { dropmenu(ii, navtitle) } 
}

这个

if (subflag) // will have a submenu 
{ 
    (function(i){ 
     lnk.onmouseover = function() { dropmenu(i, navtitle) } 
    })(ii); 
}

我希望它会解决这个问题。

来源

2012-06-24 02:22:37

尝试这样的分配您的mouseover处理程序：

lnk.onmouseover = function() { 
    return function() { 
     dropmenu(ii, navtitle); 
    } 
};

这使得在处理程序closure将保留的ii和navtitle值在处理程序创建的时间。

来源

2012-06-24 03:00:59 pete

将事件添加到动态创建的元素中的奇怪结果

回答

相关问题