jQuery Mobile liefert die ID des angeklickten Elements, das den Seitenwechsel verursacht hat, nachdem der Seitenwechsel stattgefunden hat

Question

Ich habe eine jquery mobile Anwendung mit zwei "Seiten". Auf der ersten Seite ist eine Google-Karte, und auf der zweiten Seite ist eine Listenansicht von Gebäuden, wo jedes Listenelement eine ID mit ihm verbunden ist. Wenn der Benutzer auf ein Gebäude klickt, soll die Karte zu diesem Gebäude schwenken und einen Marker anzeigen. Allerdings ist eine der Macken von Jquery Mobile, dass ich aufrufen müssen google.maps.event.trigger(map, 'resize') y map.panTo(somePosition) nach der Seitenübergang erfolgt, sonst wird die Karte nicht richtig angezeigt. Ich bin in der jQuery Mobile tippen pageshow Ereignis, um dies zu tun. Meine Frage ist, gibt es etwas entweder in der pageshow Event-Handler-Argumente oder irgendeine Möglichkeit, etwas an den pageshow Event-Handler-Argumente, die es mir ermöglichen, die ID des Listenelements zu identifizieren, das angeklickt wurde und den Seitenwechsel verursacht hat, so dass ich damit bestimmen kann, wohin die Karte geschwenkt werden soll?

Im Moment habe ich es in einer Runde über Art und Weise zu tun, wo ich in das Klick-Ereignis des ausgewählten Listenelements tippen, speichern Sie die ausgewählten Listenelement-ID in einer globalen Variablen und verwenden Sie dann, dass globale Variable später, wenn in der pageshow Ereignisbehandler.

Also etwa so:

var selectedBuilding;

$('a.buildingSelect').click(function(e) {
    e.preventDefault();
    selectedBuilding = $(this).attr("data-buildingNum");
});

$('div').live('pageshow',function(event, ui){
    if (ui.prevPage.attr('id') === "buildingSelect") {
        google.maps.event.trigger(map, 'resize');
        map.panTo(selectedBuilding);
    }
});

Abgesehen davon, dass dies etwas unübersichtlich ist, besteht eines der Probleme darin, dass der Benutzer gar keine Gebäudenummer ausgewählt hat, z. B. wenn er auf der Seite mit der Gebäudeliste die Schaltfläche "Zurück" drückt. In diesem Fall wird die pageshow Ereignisbehandlungsroutine wird immer noch ausgeführt, obwohl das ausgewählte Gebäude entweder nicht vorhanden ist, wenn der Benutzer zuvor kein Gebäude ausgewählt hat, oder die Karte schwenkt zum zuletzt ausgewählte Gebäude, wenn sie zuvor ein Gebäude ausgewählt haben, was eigentlich nicht beabsichtigt ist. Ich bin sicher, ich könnte einige zusätzliche globale Variablen für beide Event-Handler zur Verfügung stellen, um dies zu umgehen, aber es wäre ein wenig chaotisch. Idealerweise suche ich nach einer Möglichkeit, nur an die pageshow Ereignis und kann aus der gebundenen Funktion ableiten, welche Gebäude-ID angeklickt wurde.

Ich bin noch relativ neu in jQuery und javascript im Allgemeinen, so bitte beachten Sie dies. Obwohl ich ein bisschen mit den Javascript-Debugging-Tools in Chrome gespielt habe, bin ich mir immer noch nicht ganz sicher, wie ich effektiv herausfinden kann, welche Informationen in der ui Argument an die pageshow Ereignisbehandlungsroutine, die meiner Meinung nach ein guter Anfang zur Lösung solcher Probleme wäre.

Answer 1

Sie könnten die pageshow Ereignisbehandler innerhalb buildingSelect und verwenden Sie die Syntax, die es Ihnen ermöglicht, Daten über Ereignisbinder zu übergeben: .live( eventType, eventData, handler ) von http://api.jquery.com/live/ .

Aber dann müssten Sie die die anderen leben pageshow Handler, bevor Sie dies tun. Wenn ich an Ihrer Stelle wäre, würde ich einfach die Art und Weise, wie Sie diese globalen Variablen speichern, bereinigen und die Sache abhaken. Vielleicht setzen Sie sie in ein nettes Objekt, das aus einem Namespace sitzt, so dass es sicherer ist.

EDIT: Ich habe mein falsches umgangssprachliches "zerstören" in das richtige die . Sie würden also die Ereignisbehandler wie in $('div').die() oder eine der anderen Varianten, die in der Dokumentation erläutert werden: http://api.jquery.com/die/

Answer 2

Im Anschluss an die Antwort von Milimetric habe ich im Wesentlichen Folgendes getan:

var selectedBuilding;

function rejigMap(event ui) {
    google.maps.event.trigger(map, 'resize');
    map.panTo(selectedBuilding);
    $('div').die('pageshow', rejigMap);
}

$('a.buildingSelect').click(function(e) {
    e.preventDefault();
    selectedBuilding = $(this).attr("data-buildingNum");
    $('div').live('pageshow', rejigMap);
});

Indem man nur die live Hörer, wenn ein Gebäude ausgewählt wird, und dann die Zerstörung ( die Wenn ich ihn unmittelbar nach der Ausführung des erforderlichen Codes ausführe, ist das Problem der rejigMap herumhängen und unverwandten Dingen zuhören pageshow Ereignisse, die ausgelöst werden, wenn der Benutzer die Schaltfläche "Zurück" drückt und kein Gebäude ausgewählt hat. I glauben Dies könnte noch ein wenig verfeinert werden, indem der Vorschlag von Milimetric befolgt wird, die .live(eventType, eventData, handler) das ausgewählte Gebäude tatsächlich zu durchqueren, um rejigMap , wodurch die globale Variable vollständig eliminiert werden könnte.