Помогите с функцией привязки?

Question

Мне нужна помощь, чтобы понять функцию .bind, с которой я не могу работать.У меня есть пример карты Google jqtouch, который получает и отображает карту правильно в div на той же странице, что и остальной код.Хорошо!

Код для привязки div карты выглядит следующим образом:

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

Но сейчас я пытаюсь разместить div карты в отдельной html-странице, которая загружается с помощью jqtouch.Отдельная страница загружается как надо, но карта не отображается.Поэтому я должен изменить привязку, и я пробовал много разных вещей, но не могу заставить его работать.

Я читал, что вы также можете использовать .live вместо .bind и что .live работает даже после того, как dom скомпилировал все, так что лучше использовать .live, может быть?

Может кто-нибудь, пожалуйста, помогите мне понять, как это работает и что я должен сделать, чтобы это работало при загрузке отдельных html-страниц.Большое спасибо!

Answer 1

Спасибо, ребята. Но я думаю у меня так, как ты говоришь !? И именно поэтому я не понимаю этого. Вот как выглядит googlemap2.asp:

 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();
                }
            });
        });

И отдельная загружаемая страница (googlemap3.asp) выглядит следующим образом:

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

Если у меня есть вышеуказанный div в googlemap2.asp вместо googlemap3.asp, тогда он работает! Я действительно надеюсь, что вы знаете, что не так, потому что я не: -)

Answer 2

Убедитесь, что вы инициализируете и привязываете карту после страницы с картой загружены.