Matthias: Dom nach Manipulation neu laden

Nabend,

mal wieder ein JavaScript-/jQuery-Problem:

Ich lade mir nach folgenden Click-Event:

$(".icon").live('click', function(){ .... });

Daten per AJAX vom Server und binde diese in den DOM ein. Dabei handelt es sich um Dateinamen für eine Bildergalerie. Diese werden dann in ein neu erstellten Div-Container platziert, so dass die Thumbs dargestellt werden.

Nach einen Click auf die Thumbs, möchte ich nun eine Lightbox zur Anzeige der Bilder öffnen:

$('a.image').fancybox({ ... });

Diese Funktioniert so leider nicht. Wenn ich die Fancybox auf statische Inhalte anwennde, läuft es. Daher nehme ich an, dass durch das nachträgliche einbinden der Daten, der DOM neu geladen werden muss. Dieses sollte ja, lt Docu, mit dem live()-Event-Handler nicht mehr nötig sein.

Irgendwer ne Idee?

Vielen Dank im voraus

Gruss
Matthias

  1. Diese Funktioniert so leider nicht. Wenn ich die Fancybox auf statische Inhalte anwennde, läuft es. Daher nehme ich an, dass durch das nachträgliche einbinden der Daten, der DOM neu geladen werden muss.

    Was soll das neue laden des DOM denn bringen? Dann hast du doch wieder deinen alten Zustand. Du könntest dann auch einfach auf das Einfügen des neuen Inhaltes aus dem Request verzichten.

    Dieses sollte ja, lt Docu, mit dem live()-Event-Handler nicht mehr nötig sein.

    live schaut einfach zyklisch nach, ob ein weiteres Element, welches auf deinen Selektor passt, hinzugekommen ist und registriert an diesem Element deinen Event-Handler. Das ist total unnötig, weil du das auch selbst machen könntest, da du ja den Zeitpunkt kennst, wo neue Elemente hinzukommen. Ausserdem hat dieser Eventhandler doch sicher keinen Einfluss auf deine Lightbox, oder initialisierst du diese dort neu?

    1. Was soll das neue laden des DOM denn bringen? Dann hast du doch wieder deinen alten Zustand. Du könntest dann auch einfach auf das Einfügen des neuen Inhaltes aus dem Request verzichten.

      Neu Laden ist wohl falsch geschrieben, wohl eher neu Analysieren.

      live schaut einfach zyklisch nach, ob ein weiteres Element, welches auf deinen Selektor passt, hinzugekommen ist und registriert an diesem Element deinen Event-Handler. Das ist total unnötig, weil du das auch selbst machen könntest, da du ja den Zeitpunkt kennst, wo neue Elemente hinzukommen. Ausserdem hat dieser Eventhandler doch sicher keinen Einfluss auf deine Lightbox, oder initialisierst du diese dort neu?

      die Daten werden im folgenden Format in den DOM eingefügt:

        
      <div class="window">  
      <a class='image' rel='group' href='bilder/3863283198_f01fb38eb7_o.jpg'><img src='cache/3863283198_f01fb38eb7_o.jpg' alt='3863283198_f01fb38eb7_o.jpg'/></a>  
      <a class='image' rel='group' href='bilder/3785759008_b89c77f325_o.jpg'><img src='cache/3785759008_b89c77f325_o.jpg' alt='3785759008_b89c77f325_o.jpg'/></a>  
      <a class='image' rel='group' href='bilder/3999465134_3fd7b26946_o.jpg'><img src='cache/3999465134_3fd7b26946_o.jpg' alt='3999465134_3fd7b26946_o.jpg'/></a>  
      <a class='image' rel='group' href='bilder/3726828165_48b7c20f28_o.jpg'><img src='cache/3726828165_48b7c20f28_o.jpg' alt='3726828165_48b7c20f28_o.jpg'/></a>  
      <a class='image' rel='group' href='bilder/3577003532_2b94cc310b_o.jpg'><img src='cache/3577003532_2b94cc310b_o.jpg' alt='3577003532_2b94cc310b_o.jpg'/></a>  
      </div>
      

      Der Event-Handler hat keinen Einfluss auf die Fancybox. Allerdings reagiert die Fancybox auch nicht, wenn sie durch die eingebetteten Inhalte angesprochen werden soll.

      Gruss
      Matthias

      1. Neu Laden ist wohl falsch geschrieben, wohl eher neu Analysieren.

        Das passiert beim Einfügen.

        Der Event-Handler hat keinen Einfluss auf die Fancybox. Allerdings reagiert die Fancybox auch nicht, wenn sie durch die eingebetteten Inhalte angesprochen werden soll.

        Nicht Allerdings, sondern deswegen!

    2. live schaut einfach zyklisch nach, ob ein weiteres Element, welches auf deinen Selektor passt, hinzugekommen ist und registriert an diesem Element deinen Event-Handler.

      Das stimmt nicht, live() arbeitet mit Event Delegation, also mit der zentralen Überwachung von bubblenden Events.

      Mathias

      1. live schaut einfach zyklisch nach, ob ein weiteres Element, welches auf deinen Selektor passt, hinzugekommen ist und registriert an diesem Element deinen Event-Handler.

        Das stimmt nicht, live() arbeitet mit Event Delegation, also mit der zentralen Überwachung von bubblenden Events.

        Hallo,
        du hast recht, ich hätte schwören können, dass ich mir das mal angesehen hatte, habe mir das wohl aber nur eingebildet, weil ich mir nur so vorstellen konnte, dass es auch funktioniert.
        Wobei wir auch schon beim Problem wären. mit einer zyklischen Überwachung hätte es nur inerhalb des Zyklus nach dem Einfügen nicht funktioniert. So funktioniert es u.U. überhaupt nicht.
        Ich finde weder das eine, noch das andere gut und da man ja weiss, wann man etwas einfügt, live auch unnötig.