Vreemd resultaat bij het toevoegen van een gebeurtenis aan een dynamisch gemaakt element

Deze code wordt uitgevoerd (ten minste in Firefox) en maakt de onmouseover-gebeurtenishandler aan en koppelt deze aan de drie elementen die zijn aangewezen om een ​​submenu te hebben door de naam vooraf te laten gaan door een _. Het voegt de handler niet toe aan degenen die het niet zouden moeten hebben.

Als ik doorloop in Firebug, lijkt alles goed te werken; dat is de handler is gekoppeld met de juiste id en navtitle.

In de browser hebben de juiste elementen een mouseover-gebeurtenis die vuurt. NOCHTANS, zijn de parameters die aan die gebeurtenishandler in ELK geval worden doorgegeven "6" en "Andere" ondanks het feit dat geen gebeurtenishandler zelfs aan "Ander" wordt vastgemaakt. Ik denk dat ik alles goed heb begrepen, dus ik begrijp niet waarom dit gebeurt.

Wat mis ik hier?

Bedankt!

// Bovenliggend element waaraan ik onderliggende elementen zal toevoegen

var navdiv = document.getElementById('nav') 

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

// Horizontaal menu

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;
}
0

3 antwoord

dropmenu(ii, navtitle) is the cause because ii is equal to nnav when the loop terminates. you need to take a snapshot of ii and pass that to dropmenu instead.

0
toegevoegd

Probeer uw mouseover -handler zo toe te wijzen:

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

Dit maakt de handler een afsluiting die de waarden van ii en navtitle op het moment dat de handler werd gemaakt.

0
toegevoegd

Verander dit,

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

hieraan

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

Ik hoop dat het het probleem zal oplossen.

0
toegevoegd