[jQuery] Link

[MixCool]

Ich wieder ein kleines Problemchen.
Ich habe den folgenden jQuery-Code geschrieben, um den Content mit anderen Texten zu laden:

Code:

$("a").click(function() {
  $.get("seite.php?s=" + $(this).attr("href"),{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
    $("#content").slideUp("slow", function() { $("#content").html(returned_data); });
    $("#content").animate({opacity: "show"}, "slow");
  });
  return false;
});

Diese Lösung funktioniert auch prima. Nur, wenn ich ich dem neu geladenen Content ein Link habe, wird der nicht von jQuery "erkannt" und er fungiert als "normaler" HTML-Link und ich komme somit auf eine 404-Errorpage .

Ich habe es probiert, in der "seite.php" diese Funktion neu zu deklarieren, aber da gibt es nur Probleme, dann wird der Content wiederholt geladen, und desto öfter ich dann einen Link anklicke, desto öfters wird der Content wiederholt neugeladen .

Hat jemand eine Idee?

MfG MixCool

[Google]

[diewie]

So wie ich das sehe, wird $("a").click nur auf den aktuellen Content angewandt. Wenn sich jedoch der Content ändert, ist für den neuen Link (neue Element im DOM-Baum) kein click-Event mehr definiert. Deshalb einfach nach dem Nachladen nochmals dein $a.click(...) ausführen lassen und alles sollte wieder funktionieren.

Viele Grüße,
Stefan

[MixCool]

Und wie mache ich das am besten? Kenne mich nicht so sonderlich gut aus in JQuery, fange erst an, es zu begreifen

MfG MixCool

[diewie]

Eigentlich muss man nur eine Art Rekursion machen, damit der neue Content wieder so verlinkt wird. Ohne das getestet zu haben (benutze kein jQuery) habe ich mal ein Beispiel versucht. Einfach mal ausprobieren und ggf. ausbessern.

Code:

//irgendwo muss initial die Funktion mal aufgerufen werden
makeAjaxLink();

function makeAjaxLink() {
    $("a").click(function() {
$.get("seite.php?s=" + $(this).attr("href"),{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
$("#content").slideUp("slow", function() {
$("#content").html(returned_data);
// Hier "rekursiv aufrufen, damit der neue Content auch wieder "gelinkt" wird
makeAjaxLink();
});
$("#content").animate({opacity: "show"}, "slow");
});
return false;
    });
}

Viele Grüße,
Stefan

[MixCool]

Da passiert leider genau das gleiche Problem wie ich oben beschrieben habe mit den Wiederholungen :( .

MfG MixCool

[diewie]

Hm komisch. Kannst du etwas mehr Quelltext posten, damit man das drumherum mal anschauen kann.

Viele Grüße,
Stefan

[MixCool]

Da gibt es nicht mehr viel zu posten, ich kann ja mal den kompletten jQuery-Code posten:

Code:

$(document).ready(function() {
              $.get("page/index.php?page=startseite",{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
                $("#content").html(returned_data);
                return false;
              });
              $("#suchenInput").keyup(function () {
                $.get("page/index.php?page=suchendiv&suchen=" + $("#suchenInput").attr("value"),{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
                  $("#suchergebnisse").html(returned_data);
                });
              })
              $("a").click(function() {
                $("#loadDiv").animate({opacity: "show"}, "slow");
                $.get("page/index.php?page=" + $(this).attr("href"),{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
                  $("#content").slideUp("slow", function() { $("#content").html(returned_data); });
                  $("#content").animate({opacity: "show"}, "slow");
                  $("#loadDiv").animate({opacity: "hide"}, "slow");
                });
                return false;
              });
              $("#suchen").click(function() {
                $("#suchenDiv").animate({opacity: "toggle"}, "slow");
                $("#loadDiv").animate({opacity: "hide"}, "slow");
              });
              $("#login").click(function() {
                $("#loginDiv").animate({opacity: "toggle"}, "slow");
                $("#loadDiv").animate({opacity: "hide"}, "slow");
              });
            });

Ich kann dazu noch sagen, dass der Content eine normale Div-Box ist, und der Text ganz normaler text mit HTML-Elementen. Das wars...

Ich hoffe, dir fällt etwas ein .

MfG MixCool

[MixCool]

hat keiner eine Idee :(

MfG MixCool

[diewie]

Sorry, ich hatte viel mit der Uni zu tun. Ich habe mir mal die jQuery Doku angesehen. Die Events werden praktisch gequeued, deshalb kommt es zu einer Art "Schleife" bei dir.

So müsste es jedoch funktionieren (ungetestet):

Code:

$(document).ready(function() {
    $.get("page/index.php?page=startseite",{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
$("#content").html(returned_data);
ajaxLink();
return false;
    });
    $("#suchenInput").keyup(function () {
$.get("page/index.php?page=suchendiv&suchen=" + $("#suchenInput").attr("value"),{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
$("#suchergebnisse").html(returned_data);
ajaxLink();
});
    })
    $("#suchen").click(function() {
$("#suchenDiv").animate({opacity: "toggle"}, "slow");
$("#loadDiv").animate({opacity: "hide"}, "slow");
    });
    $("#login").click(function() {
$("#loginDiv").animate({opacity: "toggle"}, "slow");
$("#loadDiv").animate({opacity: "hide"}, "slow");
    });
});

function ajaxLink() {
    /* Event erst entfernen, damit nicht mehrere onClick Events aufgerufen werden und eine Art Warteliste entsteht */
    $("a").unbind("click");
    $("a").click(function() {
$("#loadDiv").animate({opacity: "show"}, "slow");
$.get("page/index.php?page=" + $(this).attr("href"),{cache:Math.round(Math.random()*100000+1)},function(returned_data) {
$("#content").slideUp("slow", function() {
$("#content").html(returned_data);
ajaxLink();
});
$("#content").animate({opacity: "show"}, "slow");
$("#loadDiv").animate({opacity: "hide"}, "slow");
});
return false;
    });
}

Viele Grüße,
Stefan