Content removed when leaving a page_问答_开发者

I am currently working on a fairly basic phone gap applications. On one page I populate a listview from a JSON object. It populates fine and I am able to click on the list to go to the next page. The problem arises when I click the android back button (this takes you back to the previous page), the content that was loaded has no disappeared. As far as I can tell the DOM element disappears as soon as the new page is loaded (however i am new to this technology so I could be wrong).

Here is the html

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Demo With JQuery Mobile</title>
      <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" />
      <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
      <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script>
      <script type="text/javascript" charset="utf-8" src="main.js"></script>
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    </head>
  <body onload="init();" data-theme="a">
    <div data-role="page" data-theme="a">
        <div data-role="header">
            <img src="images/joycard.png" alt="JoyCard" class="banner">
        </div>
        <div data-role="navbar">
            <ul>
                <li><a onclick="categoriesList();" class="ui-btn-active">KATEGORIEN</a></li>
                <li><a onclick="mapDetails();">IN DER NÄHE</a></li>
                <li><a onclick="allPartners();">ALLE PARTNER</a></li>
            </ul>
        </div><!-- /navbar --> 


        <div id="list" data-role="content" data-theme="a">
            <ul data-role="listview" data-inset="true" data-theme="a">
            </ul>
        </div><!-- end jqm content -->

        <div id="allPartners" data-role="content">  
            <ul data-role="listview" data-inset="true" data-theme="a">
            </ul>
        </div><!--/all partners list -->    

        <div id="loctext" ></div>

        <div id="map_canvas" class="mapView"></div>

        <div id="menu" data-role="content" class="menu" onClick="hideMenu();">
                    <a href="news.html" class="menu-item"><img src="images/news.png" alt="News"></a>
                    <a href="contact.html" class="menu-item"><img src="images/contact.png" alt="Contact"></a>
                    <a href="info.html" class="menu-item"><img src="images开发者_Python百科/info.png" alt="Info"></a>
        </div>
    </div>
  </body>
</html>

and the js/query

var menuUp = false;
var gotLoc = false;
var waitingForLoc = false;
var allWaitingForLoc = false;
var currentId;
var venueId;
var onDetails = false;
var onDetail = false;
var neighborhoods = [];
var markersIds = [];
var mapLoaded = false;

var latlng;
var myLat;
var myLong

document.addEventListener("menubutton", onMenuKeyDown, false);

function init() {



    $("#map_canvas").hide();
    $("#allPartners").hide();
    $("#menu").hide();

    var suc = function(position) {
        gotLoc = true;
        latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        myLat = position.coords.latitude;
        myLong = position.coords.longitude;

        if (waitingForLoc == true) {
         mapDetails();   
        } else if (allWaitingForLoc == true) {
            allPartners();
        }

    }

    var err = function(error) {
        alert("Problem with GPS" + error.message);

    }

    var geoOptions = {
        enableHighAccuracy: true,
    }


    getCategories();

    navigator.geolocation.getCurrentPosition(suc, err, geoOptions);

}

function categoriesList() {
    $("#allPartners").hide();
    $("#map_canvas").hide();
    $("#list").show();  
}

function allPartners() {

    if (gotLoc == true) {

            $('#allPartners ul').empty();

            $.getJSON("http://www.aURLiamusing.com" +
                            "&lat=" + myLat + "&lon=" + myLong,
                    function(data){
                      $.each(data, function(key, value){
                          $('<li id="'+ value.id +'" class="list-item-li" onclick="changeToDiscountDetails(this);" data-theme="a">' + value.venue + '</li>').appendTo("#allPartners ul");
                      });
                    });


            $("#map_canvas").hide();
            $("#list").hide(); 
            $("#allPartners").show();

    } else if (gotLoc == false) {
        $("#list").hide();
        jQuery("#loctext").append("Getting geolocation . . .");
        waitingForLoc = false;
        mapWaitingForLoc = true;
    }

}

//change for Iphone
function onMenuKeyDown() {
    if (menuUp == true){
        $("#menu").hide();
        menuUp = false;
    } else {
        $("#menu").show();
        menuUp = true;
    }

}

function mapDetails() {


    if (mapLoaded == false) {
        if (gotLoc == true) {

            var mapListURL = "http://www.aURLiamusing.com" +
                    "&lat=" + myLat + "&lon=" + myLong;
            console.log("this is just before the getJson");
            $.getJSON(mapListURL,
                    function(data){
                      $.each(data, function(key, value){
                          var pos = new google.maps.LatLng(value.lat, value.lon);
                          neighborhoods[key] = pos;
                          markersIds[key] = value.id;
                      });
                      setMap();
             });

        }

        if (gotLoc == false) {
            $("#list").hide();
            jQuery("#loctext").append("Getting geolocation . . .");
            allWaitingForLoc = false;
            waitingForLoc = true;

        }
    } else if (mapLoaded == true) {
        $("#allPartners").hide();
        $("#list").hide();
        $("#map_canvas").show();

    }  


}

function setMap() {

    var iterator = 0;
    var myOptions = {
            zoomControl: true,
            zoomControlOptions: {
                      style: google.maps.ZoomControlStyle.SMALL
            },
            scaleControl: true,
            streetViewControl: false,
            mapTypeControl: true,
            mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },

            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,

          };

          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          var myMarker = new google.maps.Marker({
              position: latlng,
              map: map,
              title:"Hello World!",
            });
            myMarker.setMap(map);
            for (var i = 0; i < neighborhoods.length; i++) {

                var marker = new google.maps.Marker({
                    position: neighborhoods[i],
                    map: map,
                    title:"Hello World!",

                });
                marker.set("id", markersIds[i]);

                marker.setMap(map);
                marker.metadata = {type: "point", id: i};

                google.maps.event.addListener(marker, 'click', function() {
                    var val = this.get("id");
                    venueId = val;
                   console.log(val);
                   onDetails = false;
                   onDetail = true;
                   $.mobile.changePage("discountDetails.html", { transition: "slide"});

                  });


            }

            mapLoaded = true;

            $("#allPartners").hide();
            $("#list").hide();
            $("#map_canvas").show();



}

function hideMenu(){
    $("#menu").hide();
}

$('div').live('pageshow',function(event, ui){



    if (onDetails == true) {
            getVenues();

    } else if(onDetail == true) {
        populateDetail();

    }

  });

function populateDetail() {

    var url = "http://www.aURLiamusing.com";

        $.getJSON(url,
                function(data){
                    $.each(data, function(key, value){
                        $("#details").append('<h2 data-theme="a">' + value.venue + '</h2>');
                        var picUrl = value.image;
                        picUrl.replace(/\/$/, '');
                        $("#details").append('<img data-theme="a" src="' + picUrl + '"></p>');
                        $("#details").append('<p data-theme="a">' + value.description + '</p>');
                        $("#details").append('<p data-theme="a">' + value.offer1 + '</p>');
                        $("#details").append('<p data-theme="a">' + value.offer2 + '</p>');                        
                    });
          });


}

function getCategories() {

    $('#list ul').empty();

    $.getJSON("http://www.aURLiamusing.com",
            function(data){
              $.each(data, function(key, value){
                  $('<li id="'+ value.id +'" class="list-item-li" onclick="changeToDetails(this);" data-theme="a">' + value.title + '</li>').appendTo("#list ul");
              });
            });

}

function getVenues() {


    var url = "http://www.aURLiamusing.com;

    $.getJSON(url,
            function(data){
              $.each(data, function(key, value){
                  $('<li id="'+ value.id +'" class="list-item-li" onclick="changeToDiscountDetails(this);" data-theme="a">' + value.venue + '</li>').appendTo("#venueList ul");
              });
            });

}


function changeToDetails(object) {
    currentId = $(object).attr('id');
    onDetails = true;
    $.mobile.changePage("details.html", { transition: "slide"});
}

function changeToDiscountDetails(object) {
    venueId = $(object).attr('id');
    onDetails = false;
    onDetail = true;
    $.mobile.changePage("discountDetails.html", { transition: "slide"});
}

Thanks for any help

try using