✔ IE, this.parentNode und die nackte Verzweiflung

[deostift]

Hallo zusammen,

ich komme einfach nicht mehr weiter - IE hats mal wieder geschafft.

Die Herausforderung:

Ich habe eine simple Tabelle die ich mittels DOM Funktionen aufbauen möchte. In einer zelle habe ich einen DIV Container, der beim Klicken mit einer zweiten Tabelle ausgetauscht werden soll.

var row = makeElement('tr', null, null);
row.appendChild(makeElement('th', null, 'Überschrift-Text'));

// Create div link with an event listener
var divLink = makeElement('div', null, 'Klick mich!');

// Add an event listener / workaround for IE: use attachEvent()
if (divLink.addEventListener) {
  divLink.addEventListener('click', function(){showCharValues(this.parentNode.id, arrValues)}, false); 
} else if (divLink.attachEvent) {
  divLink.attachEvent('onclick', function(){showCharValues((this.parentNode.id, arrValues)});
}

row.appendChild(makeElement('td', {'colSpan':'7', 'id':'char_tdID_'+i}, divLink));

Soweit funktioniert das auch auf nicht IE Browsern - der Funktion showCharValues() wird die ID des Elternelements übergeben (z.B. char_tdID_9) und tauscht dann das Kindelement (den DIV Container) mit der zweiten Tabelle aus.

Das Problem:

IE bekommt das this.parentNode.id nicht gebacken - bzw. soviel ich weiß ist this beim IE das window object und nicht das jeweilige Element. Ich muss aber beim Klick wissen, auf welchen DIV Container geklickt wurde, um diesen auszutauschen.


Wie bekomme ich das beim IE zum Laufen?

Viele Grüße, Deo

 

[Sven Mintel]

Moin,

this liefert bei dieser Methode der Eventüberwachung nicht, wie du vielleicht dachtest, einen Zeiger auf das auslösende Element.

Um diesen zu Erhalten, kannst du das Event-Objekt zu Rate ziehen:

divLink.attachEvent('onclick', function(){showCharValues(event.srcElement.parentNode.id, arrValues)});

 

[deostift]

Ich habe es nun wie folgt gelöst:

var row = makeElement('tr', null, null);
row.appendChild(makeElement('th', null, 'Überschrift-Text'));

// Create div link with an event listener
var divLink = makeElement('div', null, 'Klick mich!');

// Add an event listener / workaround for IE: use attachEvent()
if (divLink.addEventListener) {
  divLink.addEventListener('click', function(){showCharValues(this.parentNode.id, arrValues)}, false); 
} else if (divLink.attachEvent) {
  divLink.onclick = function(){showCharValues(this.parentNode.id, characteristics, charScrollText);};
}

row.appendChild(makeElement('td', {'colSpan':'7', 'id':'char_tdID_'+i}, divLink));

Wenn jemand eine Lösung hat wie ich dynamisch unter IE mit attachEvent() arbeiten kann, würde ich Sie mir gerne mal anschauen.

Viele Grüße,

Deo

 

[deostift]

Ich danke Dir, Sven.

Da haben sich wohl unsere Postings eben zeitlich überschnitten Ich nehme dann Deine Variante, das sie mir als die "saubere" erscheint. Das Event Object kannte ich bisher nocht nicht ... arbeite mich ja gerade erst tiefer in JS ein :suspekt: