[JS DOM] IE negeert attributen

[GX]

Ik ben voor een klant bezig met een website, Een onderdeel daarvan is een treeview welke ik aan het uitwerken ben..

Deze treeview word dynamisch gegenereerd en geplaatst in het document; nu is het zo dat het in Firefox helemaal toppie werkt, maar Internet Explorer negeert alle onclick en onmouseover events die ik toegekent heb aan de verschillende nodes.

De relevante code is:

JavaScript:

            treeFncImage = document.createElement("IMG");

            var cijfertje = Math.round((Math.random(0,14324)*100000));
            var link = document.createElement("A");
            link.setAttribute("href", "#");
            link.setAttribute("id", 'link'+cijfertje);
            link.setAttribute("onmousemove", 'alert(this.id);');
            
            if (items[i][5] && this.expanded == 0)
            {
                link.setAttribute("onclick", "Tree.act('"+cijfertje+"');");
                expImage = 'plus.png';
            }
            else if (items[i][5] && this.expanded == 1)
            {
                link.setAttribute("onclick", "Tree.act('"+cijfertje+"');");
                expImage = 'min.png';
            }
            else
            {
                expImage = 'blank.png';
            }

            treeFncImage.src = '/lib/i/'+expImage;
            treeFncImage.alt = '';
            treeFncImage.style.border = '0px';
            
            link.appendChild(treeFncImage);

            div.appendChild(link);

Als ik een

alert(link.outerHTML);

direct na de div.appendChild, dan staat daar de onclick event wel gewoon in.

Mijn vragen zijn dus: waarom negeert IE deze events, en wat kan ik doen om er voor te zorgen dat hij het wél doet.

[RM-rf]

bestaat het object Tree wel als globale variabele?

verder, het stukje Math.round((Math.random(0,14324)*100000)); genereert geen uniek getaal, hooguit een semi-ranbdom getal, waarom niet gewoon new Date().getTime()
Ik zou tevens geen aparte A genereren, maar gewoon een IMG met de events, als het om pure HTML-code ging die zelf verder benut wordt is dat misschien nuttig om correcte HTML op te zetten, maar nu wordt gewoon dynamisch de DOM opgebouwd, zonder verder opgeslagen te worden, dan werkt de snelste en eenvoudigste manier het effectiefst

[djluc]

Ik kwam deze toevallig een tijdje geleden tegen:
http://phpfreakz.nl/forum...rum=5&iid=637851#id643582

Gebruikt heel weinig JavaScript, een beetje CSS en is redelijk tot goed crossbrowser. Misschien kan je hier wel wat ideeen opdoen.

[GX]

RM-rf schreef op donderdag 14 juli 2005 @ 10:41:
bestaat het object Tree wel als globale variabele?

Zeker:

code:

var Tree = new treeview();
Tree.draggable  = false;
Tree.dragtarget = true;
Tree.checkboxes = 0;
Tree.expanded   = 1;
Tree.create_tree(0, tree, 'structure_tree');

verder, het stukje Math.round((Math.random(0,14324)*100000)); genereert geen uniek getaal, hooguit een semi-ranbdom getal, waarom niet gewoon new Date().getTime()

Ik dacht dat de laatste ook niet snel genoeg zou zijn, tenzij hij milliseconden of meer teruggeeft. Bedankt voor de tip, desalniettemin is het aantal unieke keys niet bijzonder hoog dat er per tree vereist word.
[/quote]

Ik zou tevens geen aparte A genereren, maar gewoon een IMG met de events, als het om pure HTML-code ging die zelf verder benut wordt is dat misschien nuttig om correcte HTML op te zetten, maar nu wordt gewoon dynamisch de DOM opgebouwd, zonder verder opgeslagen te worden, dan werkt de snelste en eenvoudigste manier het effectiefst

Dat is iets dat stamt uit een eerdere fase. Ik zal het direct veranderen, want je hebt gelijk.

Hiermee is het probleem helaas niet verholpen.

djluc schreef op donderdag 14 juli 2005 @ 10:46:
Ik kwam deze toevallig een tijdje geleden tegen:
http://phpfreakz.nl/forum...rum=5&iid=637851#id643582

Gebruikt heel weinig JavaScript, een beetje CSS en is redelijk tot goed crossbrowser. Misschien kan je hier wel wat ideeen opdoen.

Er zit aardig wat functionaliteit in de Tree wat hard nodig is, zoals dragfunctionaliteit en on the fly dynamisch nodes verwijderen/toevoegen. Daarom is er gekozen voor een zelfgebrouwen oplossing

[ Voor 20% gewijzigd door GX op 14-07-2005 10:48 ]

[djluc]

Heb je misschien een linkje zodat ik de code kan checken in de dom-inspector?

[GX]

Het is intern, dus helaas nee.

De DOM-inspector van Firefox doet het overigens prima op die site. Beter nog, de hele site werkt in firefox én opera, maar in Internet Explorer niet.

[BtM909]

Waarom niet gewoon DOM1?

JavaScript:

var tmp = document.getElementById('BtM909');
var linkje = document.createElement("a");

linkje.href    = 'http://Gathering.Tweakers.net';
linkje.id      = 'BtM909_Link';
linkje.title   = "Link to this section";
linkje.onclick = function(){ alert('test') };

linkje.appendChild(document.createTextNode('Administration'));
tmp.appendChild(linkje);

link is overigens een JS-reserved woord, maar lijkt wel te werken. Ik neem alleen geen onnodige risico's

[GX]

BtM909 schreef op donderdag 14 juli 2005 @ 11:18:
Waarom niet gewoon DOM1?

link is overigens een JS-reserved woord, maar lijkt wel te werken. Ik neem alleen geen onnodige risico's

link is inmiddels weg, en zit de onclick event op de image. Maar ook deze methode heeft geen resultaat.

[crisp]

events zijn feitelijk iets anders dan attributen, ook in DOM.
Voor het toekennen van events kan je addEventListener gebruiken (DOM level 2) - setAttribute is daar niet voor bedoelt.

Aangezien IE het DOM level 2 event-model niet ondersteund zou je nog kunnen terugvallen op DOM 1:

JavaScript:

element.onclick = foo;
// of met een anonieme functie:
element.onclick = function() { foo(); }

[GX]

crisp schreef op donderdag 14 juli 2005 @ 11:23:
events zijn feitelijk iets anders dan attributen, ook in DOM.
Voor het toekennen van events kan je addEventListener gebruiken (DOM level 2) - setAttribute is daar niet voor bedoelt.

Dan is het maar vieze code, het werkt nu onder de meeste browsers

Aangezien IE het DOM level 2 event-model niet ondersteund zou je nog kunnen terugvallen op DOM 1:

JavaScript:

element.onclick = foo;
// of met een anonieme functie:
element.onclick = function() { foo(); }

En dat weigert dus (zie post hierboven)

[BtM909]

GX schreef op donderdag 14 juli 2005 @ 11:25:
[...]

Dan is het maar vieze code, het werkt nu onder de meeste browsers

[...]

En dat weigert dus (zie post hierboven)

Waarom werkt mijn code wel? Laat eens nu je code zien

[GX]

BtM909 schreef op donderdag 14 juli 2005 @ 11:27:
[...]

Waarom werkt mijn code wel? Laat eens nu je code zien

Geen idee?

code:

code:

            treeFncImage = document.createElement("IMG");

            var cijfertje = Math.round((Math.random(0,14324)*100000));
            
            treeFncImage.setAttribute("id", 'link'+cijfertje);
            treeFncImage.setAttribute('cijfer', cijfertje);
            
            if (items[i][5] && this.expanded == 0)
            {
                treeFncImage.onclick = function() { Tree.act(this.cijfer); }
                expImage = 'plus.png';
            }
            else if (items[i][5] && this.expanded == 1)
            {
                treeFncImage.onclick = function() { Tree.act(this.cijfer); }
                expImage = 'min.png';
            }
            else
            {
                expImage = 'blank.png';
            }

            treeFncImage.src = '/lib/i/'+expImage;
            treeFncImage.alt = '';
            treeFncImage.style.border = '0px';

Ik corrigeer mijn post hierboven,

code:

image.onclick = function() { zut(); }

werkte wél. Vieze omweg, maar het zij zo.

Dank

[ Voor 7% gewijzigd door GX op 14-07-2005 11:37 ]

[BtM909]

JavaScript:

image.onclick = zut;

werkt ook gewoon

[crisp]

JavaScript:

treeFncImage.onclick = new Function('Tree.act(' + cijfertje + ');');

[GX]

BtM909 schreef op donderdag 14 juli 2005 @ 11:41:

JavaScript:

image.onclick = zut;

werkt ook gewoon

Als dat waar was - in dit geval - had ik dit topic niet geopend
Toegegeven, normaal werkt 't wel, waarom nu niet snap ik nog steeds niet.

crisp schreef op donderdag 14 juli 2005 @ 11:42:

JavaScript:

treeFncImage.onclick = new Function('Tree.act(' + cijfertje + ');');

Ook een manier. Danku