Am Freitag hatte ich noch ein JavaScript-Problem, das ich leider nicht mehr lösen konnte. Das Problem trat im Zusammenspiel der Multibox (einer Lightbox für verschiedene Inhalte auf MooTools-Basis) mit einem per AJAX geladenen Link auf. Multibox erweitert alle Links mit einer bestimmten CSS-Klasse durch ein onClick-Event, das ein Overlay über die Seite legt, in dem der verlinkte Inhalt angezeigt wird. Dies ist eigentlich auch eine ganz smarte Lösung, denn so erhalten Nutzer, die kein JavaScript (aktiviert) haben, den Inhalt als normalen Link. Allerdings wird mein Link zum Inhalt dynamisch per AJAX geladen. Daher hat das Multibox-Skript gar keine Chance, diesen Link onDOMReady zu kennen.
Mein Lösungsansatz war, einfach in der Verarbeitung des AJAX-Ergebnisses per JavaScript ein neues a-Element zu erstellen und in dem ohnehin schon auf der Seite vorhandenen Multibox-Element hinzuzufügen. Der Ansatz funktioniert auch tadellos im Firefox - leider nicht im Internet Explorer (Object doesn’t support this property or method).
Wenigstens wusste ich schon, an welcher Stelle der Fehler lag. Daher konnte ich das Problem (vereinfacht) nachstellen und heute auch aufspüren: Die von MooTools bereitgestellten Methoden setProperty und getProperty funktionieren im Internet Explorer nur bei Elementen, die bereits im ursprünglich an den Browser ausgelieferten HTML vorhanden sind, nicht bei nachträglich hinzugefügten Elementen.
Nehmen wir folgende (einfache) HTML-Seite:
-
<html>
-
<head>
-
<title>Test-Script</title>
-
<script type="text/javascript" src="js/mootools.v1.1.js"></script>
-
</head>
-
<body>
-
<div id="inDOM" style="border:4px solid #004000; background: #80FF00; width: 600px;">This is just a Test-DIV with the ID <em>inDOM</em></div>
-
<a href="#" onclick="doTest();">Test Me</a><br />
-
</body>
-
</html>
