"Zu viel Rekursion" Fehler beim Laden der gleichen Seite mit einem Hash

Question

Ich habe eine Website mit einer Bildergalerie ("Portfolio") Seite. Es gibt eine Dropdown-Navigation, mit der ein Benutzer ein bestimmtes Bild im Portfolio von einer beliebigen Seite der Website aus anzeigen kann. Die Links in der Navigation verwenden einen Hash, und dieser Hash wird gelesen und in eine Zeichenfolge eines Bilddateinamens konvertiert. Das src-Bildattribut auf der Seite/portfolio/wird dann mit dem neuen Bilddateinamen ausgelagert.

Das funktioniert gut, wenn ich auf den Dropdown-Link von einer Seite ANDERER als der/Portfolio/Seite selbst klicke. Wenn ich jedoch die gleiche Aktion von der/portfolio/Seite aus mache, bekomme ich einen "zu viel Rekursion" -Fehler in Firefox. Hier ist der Code:

Snippet des nav-Markup:

<li>Portfolio Category A 
    <ul> 
     <li><a href="/portfolio/#dining-room-table">Dining Room Table</a></li> 
     <li><a href="/portfolio/#bathroom-mirror">Bathroom Mirror</a></li> 

    </ul> 
</li> 

JS, die den Hash liest, wandelt es in ein Bilddateinamen und Swaps aus dem Bild auf der Seite:

$(document).ready(function() 
{ 
    if(location.pathname.indexOf("/portfolio/") > -1) 
     { 
      var hash = location.hash; 
      var new_image = hash.replace("#", "")+".jpg"; 
      swapImage(new_image); 
     } 
}); 

function swapImage(new_image) 
{ 
    setTimeout(function() 
    { 
     $("img#current-image").attr("src", "/images/portfolio/work/"+new_image); 
    }, 100); 
} 

Ich benutze die Funktion setTimeout, weil ich das alte Bild ausbleiche, bevor ich den Austausch mache, und es dann wieder einfüge. Ich dachte zuerst, dass dies die Funktion war, die den Rekursionsfehler verursachte, aber wenn ich das setTimeout entferne, habe ich es immer noch dieses Problem.

Hat das mit einer Schließung zu tun, die mir nicht bekannt ist? Ich bin ziemlich grün auf Schließungen.

JS, die für den Klick auf das nav hört:

$("nav.main li.dropdown li ul li").click(function() 
{ 
    $(this).find("a").click(); 
    $("nav.main").find("ul ul").hide(); 
    $("nav.main li.hover").removeClass("hover"); 
}); 

Ich habe nicht die Fade-in/out-Funktionalität für die Drop-Down implementiert nav noch nicht, aber ich habe es für Next und Previous Pfeile umgesetzt, die kann auch verwendet werden, um Bilder mit derselben swapImage-Funktion auszutauschen. Hier ist der Code:

$("#scroll-arrows a").click(function() 
{ 

    $("#current-image").animate({ opacity: 0 }, 100); 

    var current_image = $("#current-image").attr("src").split("/").pop(); 
    var new_image; 
    var positions = getPositions(current_image); 

    if($(this).is(".right")) 
    { 
     new_image = positions.next_img; 
    } 
    else 
    { 
     new_image = positions.prev_img; 
    } 

    swapImage(new_image); 

    $("#current-image").animate({ opacity: 1 }, 100); 

    return false; 
}); 

Hier ist der Fehler ich in Firefox immer:

too much recursion 
var ret = handleObj.handler.apply(this, arguments); 
jquery.js (line 1936) 

Vielen Dank für jede Beratung.

Answer 1

Ich würde annehmen, dass das Klicken auf den Link auch einen Klick auf die UL/LI auslöst, die Sie beobachten und in der Sie (einen anderen) Klick auf den Anker ausführen, der Ihren Beobachter erneut auslöst, und so weiter. Jedes Mal, wenn das/portfolio/dann neu geladen wird und die ready() -Feuerstelle und irgendwo da drin rekurriert. Haben Sie versucht, im Debugger den Callstack zu betrachten? Sollte ziemlich offensichtlich werden, zwischen welchen Methoden es springt.

René