kostenloser Webspace werbefrei: lima-city

JQuery: Javascript von geladenen Inhalt funktioniert nicht

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   all-web

   all-web hat kostenlosen Webspace.

   11:16, 7.3.2011

   Heyho
   Analg zum Theard http://www.lima-city.de/thread/layoutkonzept-portfolio-zum-bewerten versuche ich mich nun mit der Umsetzung des Layouts. Der aktuelle Stand der Programmierung findet Ihr unter http://testing.globals.ch/newpage/. Grundsätzlich läuft die Umsetzung super, beachtet bitte den unübersichtlichen ref="/tag/code">Code nicht, dieser wird noch bereinigt.
   
   Leider aber habe ich ein Problem: In den per AJAX nachgeladenen Inhalten funktioniert das enthaltene Javascript nicht, oder nur teilweise.
   
   Es funktioniert so:
   - Es bestehen zwei container #header und #content, welche bei einem Seitenaufruf mit der funktion .get() aktualisiert werden
   - Ich habe eine Funktion geschrieben, die beide container aktualisiert, den Loading-Screen steuert und anschliessend wieder einblendet.
   - Ein link wird mithilfe folgendem code umgeleitet:

   $("#nav_startseite").click(function(){blendfrage ("index.php", "#nav_startseite", "close"); return false; });

   (#nav_startseite ist die ID des links, index.php die zu ladende datei und close eine anweisung für das Menü).
   -Funktion blendfrage(), ich habe diese hier ein wenig zur lesbarkeit gekürzt.
   

   function blendfrage(datei, quelle, subnav) {
   			//�berpr�fung ob die Seite schon geladen wurde!
   			if(datei != act) { 
   				//Ausblenden
   				
   				$('#loadscreen').fadeIn(200);
   				//Titel animieren
   				$("#header").fadeOut(100, function() {
   					$.get("lay_header.php", { "import": "1", "get": quelle }, function(data){
   						$("#header").html(data);
   						$("#header").fadeIn(200);
   					});
   				});
   				
   				$("#content").fadeOut(400, function() {
   					//Animation abgeshclossen
   						$.get(datei, { "import": "1" }, function(data){
   							//Daten schreiben
   							$("#content").html(data);
   							$.getScript("res/script_content.js");
   							$('#loadscreen').fadeOut(500);
   							//Wieder einblenden
   							$("#content").fadeIn(1000);
   							act = datei;
   						});
   						
   						});
   						
   			};
   		};

   
   Wie ihr seht, wird mit $.getScript("res/script_content.js"); ein weiteres js-file nachgeladen, in welchem des javascript-inhalt für die geladene Seite enthalten ist. Laut google wird so gewährleistet, dass das geladene script im neuen content aktiv ist.
   
   NUR: Die funktion blendfrage kann ich im geladenen inhalt nicht ausführen. Wenn ich ein link wie oben geschrieben umleiten versuche, navigiert der browser normal zu der seite, als wäre nichts hinterlegt. Weiss jemand, weshalb dies so ist? Auch z.B. funktioniert der Schaukasten nach einem aufruf über das Menü/AJAX nciht mehr.
   
   Thx & Grüsse
   
   Beitrag zuletzt geändert: 7.3.2011 11:16:56 von all-web

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. g****e

   11:49, 7.3.2011

   du baust das javascript anscheinend mit .html ein, das ist leider falsch^^
   du musst das ganze per dom einfügen, damit es auch ausgeführt wird. wenn du also ein JS file nachläst dann vllt über diese funktion:
   
   

   function nachLaden() {
             var oScript = document.createElement("script");
             oScript.src = "example1.js";
             document.body.appendChild(oScript);
           }

   
   
   damit erzeugst du am ende des documents:
   

   <script src="example1.js"></script>

   welches dann interpretiert wird im normalfall und der code geladen + ausgeführt wird.
   
   das ist mein informationsstand.
   ansonsten für den notfall
   
   vlt hilfts dir =) vllt hat jemand anders auch ne bessere idee

4. t*****b

   11:56, 7.3.2011

   ggamee schrieb:
   du baust das javascript anscheinend mit .html ein, das ist leider falsch^^
   du musst das ganze per dom einfügen, damit es auch ausgeführt wird. wenn du also ein JS file nachläst dann vllt über diese funktion:
   

   
   
   Das macht ja $("#content").html(data), darum kann das nicht der Grund sein.
   
   Wie rufst du die Funktion blendfrage() aus dem geladenen HTML auf? Direkt per OnClick-Event im Link? Ansonsten müsstest du den neuen Links erst wieder das Event hinzufügen.

5. g****e

   12:21, 7.3.2011

   optimiert sehe das ganze vllt so aus:
   
   

   function nachLaden(scriptname) {
             var oScript = document.createElement("script");
             oScript.src = scriptname + ".js";
             document.body.appendChild(oScript);
   }
   
   function loadNewContent( ... ) {
       $(...).fadeOut();
       $(...).ajax(newcontent);
       var array = $('#GETSCRIPTS').html().split('|');
       for ( i=0 ; i < array.length ; i++ ) {
           nachLaden( array[i] );
       }
       $('#GETSCRIPTS').remove();
       $(...).fadeIn();
   }

   
   
   #GETSCRIPTS ist ein display:none; container in dem nachgeladenen scriptnamen für die jeweilige seite. ist aber nur ein kleiner rohbau.
   
   optimal ists aber nicht. lad lieber alles auf einmal bei seitenbesuch, sofern es nicht zuviel ist.

6. kochmarkus

   Co-Admin

   kochmarkus hat kostenlosen Webspace.

   12:32, 7.3.2011

   Wenn du einen Event Handler, wie click für eine bestimmte Klasse/ID definierst und später durch nachladen neue Element mit der gleichen Klasse hinzukommen funktioniert dafür der Handler nicht. Handler funktionieren nur für Element die zum Zeitpunkt des einrichtens des Handlers schon auf der Seite sind.
   
   Du musst die live() Option verwenden damit Event Handler auch für nachgeladene Sahen funktionieren.
   z.B.
   

   $("#nav_startseite").live("click", function(){blendfrage ("index.php", "#nav_startseite", "close"); return false; });

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?