Help with bind function?

I need some help to understand the .bind function that I cant get working. I have the jqtouch google map example that gets and displays the map correctly in a div in the same page as the rest of the code. Good!

The code for binding the map div looks like this:

    $('#map').bind('pageAnimationEnd', function(event, info){ 
        if (info.direction == 'in') { 
            localiser(); 
        } 
    }); 

But now Im trying to place t开发者_JAVA技巧he map div in a seperate html page that loads with jqtouch. The seperate page is loading as it should but the map is not displayed. So I have to change the binding, and I have tryed many different things but cant get it working.

I read that you also can use .live instead of .bind and that the .live is working even after the dom has compiled everything, so is it better to use .live maybe?

Can somebody please help me understand how it works and what I have to do to get it working when loading seperate html pages. Thanks a lot!

Ensure that you initialize and bind to you map after the page with map is loaded.

Thanks guys. But I think I have it like you say!? And thats why I dont understand it. This is how googlemap2.asp looks:

 function localiser() {
            if ($("#map_canvas").html()) return;

            if ((window.orientation == (-90)) || (window.orientation == (90))) {
                var width = 520; var height = 285;
                $('#map_canvas').css("width",width+"px");
                $('#map_canvas').css("height",height+"px");
                $('#map-overflow').css("width",(width-40)+"px");
                $('#map-overflow').css("height",(height-10)+"px");
            } else {
                var width = 360; var height = 435;
                $('#map_canvas').css("width",width+"px");
                $('#map_canvas').css("height",height+"px");
                $('#map-overflow').css("width",(width-40)+"px");
                $('#map-overflow').css("height",(height-10)+"px");
            }

            var myLatlng = new google.maps.LatLng(57.127426175, 12.26577967);
            var myOptions = {
              zoom: 16,
              center: myLatlng,
              disableDefaultUI: true,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
           var image = new google.maps.MarkerImage("info.png",new google.maps.Size(32, 37));
            var shadowi = new google.maps.MarkerImage("shadow.png",new google.maps.Size(51, 37));
              var myLatLng = new google.maps.LatLng(57.127426175, 12.26577967);
              var beachMarker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                        shadow: shadowi,
                  icon: image
              });
        }

 jQT = new $.jQTouch({
        });

        $(document).ready(function(e){
            $(function(){
                $('body').bind('turn', function(event, info){
                    var curr = $(".current").attr("id");
                    switch (curr) {
                    case "map"       :
                      if (info.orientation == "landscape") {
                          var width = 520; var height = 285;
                          $('#map_canvas').css("width",width+"px");
                          $('#map_canvas').css("height",height+"px");
                          $('#map-overflow').css("width",(width-40)+"px");
                          $('#map-overflow').css("height",(height-10)+"px");
                      } else {
                          var width = 360; var height = 435;
                          $('#map_canvas').css("width",width+"px");
                          $('#map_canvas').css("height",height+"px");
                          $('#map-overflow').css("width",(width-40)+"px");
                          $('#map-overflow').css("height",(height-10)+"px");
                      }
                      break;
                   }
                });
            });
            $('#map').live('pageAnimationEnd', function(event, info){
                if (info.direction == 'in') {
                    localiser();
                }
            });
        });

And the seperate page that I load (googlemap3.asp) looks like this:

<div id="map" class="notransform">
            <div class="toolbar">
                <h1>Map demo</h1>
                <a href="#" class="back">Back</a>
            </div>

       <div id="map-container" class="notransform">
                <div id="map_text">This is my location</div>

                <div id="map-overflow" style="overflow: hidden; padding: 0; border: 0;" class="notransform">
                    <div id="map_canvas" style="margin-left: -20px; margin-top: -20px;" class="notransform"></div>
                </div>
       </div>
 </div>

If I have the above div in the googlemap2.asp instead of googlemap3.asp then it works! I really hope that you know whats wrong, because I dont :-)