MooTools reagiert nicht auf "dynamische Links"?

[Tobi81]

Hallo zusammen,

ich hab da ein ganz komisches Phänomen das ich mal so detailliert wie möglich beschreiben will:

Mit xajax lade ich auf einer Website einen Link nach. Dieser Link soll zum Testen eine Alert-Box anzeigen.

<a href="#" class="modal"><img src="bild.png" /></a>

Der Listener in MooTools sieht so aus:

                $$('.modallink').addEvent('click', function(e){ 
                    e.stop(); 
                    alert('Hallo'); 
                });

Wenn ich den Link oben statisch in die Website schreibe, öffnet sich der Alert. Wenn ich den Link allerdings durch xajax nachladen lasse, kann ich auf den Link klicken wie ich will, aber die Box erscheint nicht. :-(

Warum das mit dem "dynamischen Link" nicht geht, kann ich mir nur damit erklären, dass der Link ja nicht im HTML Code drin steht, sondern halt irgendwo im Speicher. Wenn man im Firefox sich den Quellcode anschaut, steht dort der Link ja nicht. Wenn ich mir das gleiche im Firebug oder so anschaue, sehe ich den Link. Liegt das daran? Wie bekomm ich dann den Listener dazu, auf den Klick zu reagieren? Es muss doch eine Lösung geben. :-(

Ich hoffe das ganz ich jetzt verständlich genug geschrieben.
Ich freue mich auf jeden Hinweis.

Viele Grüße,
Tobias

 

[Sven Mintel]

Moin Tobi,

dass der Link ja nicht im HTML Code drin steht, sondern halt irgendwo im Speicher

Irgendwie steht ja alles im Speicher...du kannst davon ausgehen, dass der Browser intern etwas ganz anderes verarbeitet als das was du als Quelltext siehst.

Kurze Nachfrage: Was war zuerst da...Huhn oder Ei?:suspekt:

ach nee...was war zuerst da, dynamisch per AJAX geladener Link oder Eventüberwachung?

Die Eventüberwachung sollte auf jeden Fall nach dem Laden des Linkes erfolgen...ich nehme mal an, dies ist nicht der Fall.

 

[Tobi81]

Hallo Sven,

abermals vielen Dank für deine schnelle und kompetente Hilfe.

Die Eventüberwachung mache ich nun nachdem per Ajax die Links nachgeladen wurden. Allerdings habe ich im ersten Posting den Quellcode gekürzt. Der komplette Code sieht so aus:

                $$('.modallink').addEvent('click', function(e){
                    e.stop();
                    var meinPopup = new FancyPopup();
                    meinPopup.addTitle('Template editieren');
                    meinPopup.addContent('Bitte warten...');
                    meinPopup.addButton('Fertig');
                    meinPopup.addOverlay();
                    meinPopup.display();
                });

Nun habe ich aber das Problem, dass die FancyPopup Klasse nicht gefunden wird.
Die entsprechende Meldung bekomme ich durch FireBug nachdem ich auf den Link geklickt habe. Der Listener funktioniert nun also:

FancyPopup is not defined

Nun umfasst die Klasse über 100 Zeilen Code und ist ja auch schon in dem HTML Dokument eingebaut:

<script type="text/JavaScript" src="../../../js/popup.js"></script>

Die popup.js Datei sieht so aus:

            window.addEvent('domready', function(){
                var Popup = new Class({

[...]

                var FancyPopup = new Class({

Wo liegt nun das Problem?

Vielen Dank,
Tobias

 

[Sven Mintel]

Ist das irgendwo online?

Anhand der verfügbaren Infos ist es recht schwer, das Problem auszumachen

 

[Tobi81]

Nein, ich hab nix was online ist weil das ein Bestandteil von einem riesen Projekt ist.

Ich versuch mal kleines zu basteln.

 

[Sven Mintel]

Das Problem wurde im stillen Kämmerlein weiter erörtert.
Falls noch jemand ein ähnliches Problem hat:

FancyPopup wird beim domready innerhalb einer einer anonymen Funktion mittels des Schlüsselwortes var deklariert, dadurch ist es nicht global sichtbar und die spätere Zuweisung an den Click-Event schlägt fehl.

Lösung: global machen