jQuery.load() abrufen Seite div-id in der Anker-link

Habe ich Folgendes in mein Menü-navigation:

<ul>
  <li><a href="#" id="folio1"><img src="img1.jpg" border="0" /></a></li>
  <li><a href="#" id="folio2"><img src="img2.jpg" border="0" /></a></li>
</ul>

Die Aufrufe der jQuery:

<script type="text/javascript">
    $("#folio1").click(function () { 
      $('#folioWrap').load('folio1.html');
    });

    $("#folio2").click(function () { 
      $('#folioWrap').load('folio2.html');
    });
</script>

Sollte dieses update das div #folioWrap aber jetzt ist es nur leer. Also, ich habe 2 Fragen:

1 - Ist es ein Grundsätzliches problem, was ich habe, hier, was die leere Seite laden?

2 - gibt es eine Möglichkeit, dass ich schreiben kann, die von jQuery, so dass ich nur noch eine Instanz und kann stattdessen passieren alle die info von der Anker-link? So konnte ich eine große Anzahl von links, die verweisen auf eine Vielzahl von Seiten erstellen, anstatt ein jQuery-ref für jede und jeden?

  • Sind Sie versuchen, den Zugriff auf diese auf Ihrem lokalen Rechner? Manchmal gibt es Fragen der Sicherheit, um zu verhindern, dass Sie das laden einer lokalen Datei
  • Nein, es ist im gleichen Verzeichnis wie der source-Seite auf dem server
  • Ist es eine vollständige HTML-Seite? Mit <html><head></head><body>... etc? Ich empfehle es öffnen sich in Chrome developer tools mit XHR-Request-Logging eingeschaltet. Dann können Sie sehen, was es anfordern / kommen zurück mit
InformationsquelleAutor brianrhea | 2011-01-10
  1. 4

    1

    Ich denke, du hast vergessen die jQuery onload-Ereignis?

    2

    Was ich tun würde, ist erstellen Sie Ihre Anker-tags, die Sie laden möchten ajax mit einigen css-Klasse. Es wird wohl Fälle geben, in denen Sie nicht ändern wollen folioWrap Inhalte (zum Beispiel: öffnen eines externen Links)

    <ul>
    <li><a href="folio1.html" class="load"><img src="img1.jpg" border="0" /></a></li>
    <li><a href="folio2.html" class="load"><img src="img2.jpg" border="0" /></a></li>
</ul>

<script type="text/javascript">
    $(function(){
        $("a.load").click(function (e) { 
            e.preventDefault();
            $("#folioWrap").load($(this).attr("href"));
        });
    });
</script>
    InformationsquelleAutor hunter
  2. 4

    Ich denke, ein Teil des Problems könnte sein, du bist es läuft auf einer lokalen Maschine (und versuchen den Zugriff auf eine lokale Datei durch .load() die Probleme verursachen können, zu Zeiten. Ein weiterer Grund könnte sein, dass die HTML-Datei ist eine vollständige, so dass Ihr browser Probleme in der Darstellung (zum Beispiel, wenn es eine andere head, etc). Laden Sie nur einen Abschnitt Ihrer Seite, indem Sie:

    $("#element").load("file.html #divName");

    Wie für die Verwendung der ID anstelle der Duplizierung des Codes können Sie dies tun:

    $("a").click(function () { 
  $('#folioWrap').load(this.id + '.html');
});
    • Könnte ich schlage vor, verwenden Sie den einheitlichen Zugriff auf die id? Wie diese: $('#folioWrap').load(this.id+'.html')
    • Vielen Dank 🙂 Nicht ganz mit ihm heute
    InformationsquelleAutor Jonathon Bolster
  3. 3

    Könnten Sie speichern die url in der href Attribut:

    <ul>
  <li><a href="folio1.html" id="folio1"><img src="img1.jpg" border="0" /></a></li>
  <li><a href="folio2.html" id="folio2"><img src="img2.jpg" border="0" /></a></li>
</ul>

<script>
$("#folio1, #folio2").click(function (e) { 
    $('#folioWrap').load($(this).attr("href"));
    e.preventDefault();
});
</script>

    Dies hat den Vorteil, dass es nicht zu brechen, tabbed-browsing, und es funktioniert immer noch mit deaktiviertem javascript. (Diese beiden "Vorteile" davon ausgehen, dass es sieht nicht ganz gebrochen folio1.html oder folio2.html erscheinen auf Ihrer eigenen.)

    Als die für Ihre erste Ausgabe mit load nicht arbeiten, haben Sie einen Blick auf jQuery .load() funktioniert nicht in Chrome

    • Würden Sie nicht brauchen, um return false im click-handler?
    • Ich gehe mit e.preventDefault() eher als false zurückgeben, da es nicht zu stoppen das Ereignis propagieren.
    • yup! oder preventDefault()
    • Gute Entscheidung Jungs. Ich hatte vergessen hinzuzufügen, daß die Linie.
    InformationsquelleAutor Emmett
Schreibe einen Kommentar