Help with bind function?

Question

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 the 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!

score 0 · Answer 1 · answered Jan 30 '11 at 12:27

0

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

answered Jan 30 '11 at 12:27

gor

11,498
5
36
42

or use `live` instead of `bind` for dynamically generated content. – Cronco Jan 30 '11 at 12:47
@Cronco you mean use `delegate` instead of `bind` – Raynos Jan 30 '11 at 15:02
@Raynos I'm at a loss. The description in the jquery api documentation for `live` is "Attach a handler to the event for all elements which match the current selector, now and in the future." while for `delegate` it is "Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.". I'm certain `live` would be adequate for the job at hand. – Cronco Jan 30 '11 at 19:57
@Cronco `.live` is a lot more expensive computationaly. You almost always want to favour `.delegate` because it's simply a cheaper operation. See a better [explanation](http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate/4204349#4204349) – Raynos Jan 30 '11 at 20:02
Thanks guys :-) so delegate it is, but it still isnt working! – Claes Gustavsson Jan 30 '11 at 21:46

score 0 · Answer 2 · answered Jan 30 '11 at 14:58

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 :-)

see what happens if you manually trigger the event after you load the page. You can manually trigger an event with `.trigger`. — Cronco, Jan 31 '11 at 02:28

Help with bind function?

2 Answers2