openweathermap api在IE11中不起作用

Question

我使用jQuery Mobile來獲取openweathermap.org的天氣數據並顯示它。 它在IE10上運行正常，但在IE11上不起作用。 可能是什么原因？ （它適用於Chrome。）您可以在http://jsfiddle.net/Gajotres/frSsS/上看到這些代碼

$(document).on('pageinit', '#index', function(){        
    $(document).on('click', '#city-search-btn', function(){ 
       var cityName = $('#city-search').val();
       if(cityName.length > 0) {
         var url = 'http://api.openweathermap.org/data/2.5/weather?q='+cityName+'&units=metric';    
          $.ajax({
              url: url,
              dataType: "jsonp",
              async: true,
              beforeSend: function() {
                 // This callback function will trigger before data is sent
                 $.mobile.loading('show', {theme:"a", text:"Please wait...", textonly:false, textVisible: true}); // This will show ajax spinner
              },
              complete: function() {
                 // This callback function will trigger on data sent/received complete
                 $.mobile.loading('hide'); // This will hide ajax spinner
              },                
              success: function (result) {
                  ajax.parseJSONP(result);
              },
              error: function (request,error) {
                  alert('Network error has occurred please try again!');
              }
         });          
       } else {
             alert('Please enter city name!');
       }       
    });        
});

$(document).on('pagehide', '#map', function(){   
    $(this).remove();
});

$(document).on('pageshow', '#map',function(e,data){   
    var minZoomLevel = 12;

    var myLatLng = new google.maps.LatLng(weatherData.response.coord.lat, weatherData.response.coord.lon);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: minZoomLevel,
       center: myLatLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });

   var image = {
       url:  'http://openweathermap.org/img/w/'+weatherData.response.weather[0].icon+'.png'
   };

   infoWindow = new google.maps.InfoWindow();
   infoWindow.setOptions({
       content: "<div class='info-window'><div class='icon-holder'><img src='http://openweathermap.org/img/w/"+weatherData.response.weather[0].icon+".png'/></div><div class='info-holder'><span class='info-text'>City:</span><br/>"+weatherData.response.name+"<br/><span class='info-text'>Min. Temp:</span><br/>"+weatherData.response.main.temp_min+" °C<br/><span class='info-text'>Temp:</span><br/>"+weatherData.response.main.temp+" °C<br/><span class='info-text'>Max. Temp:</span><br/>"+weatherData.response.main.temp_max+" °C</div></div>",
       position: myLatLng,
    });
   infoWindow.open(map);     

});

var ajax = {  
    parseJSONP:function(result){  
        weatherData.response = result;
      //alert(JSON.stringify(weatherData.response.weather[0].icon));
       var mapPage    =   $('<div>').attr({'id':'map','data-role':'page'}).appendTo('body');
    var mapHeader  = $('<div>').attr({'data-role':'header', 'data-theme' : 'b','id':'map-header'}).appendTo(mapPage);
    $('<h3>').html(weatherData.response.name + ' weather').appendTo(mapHeader);
    $('<a>').attr({'href':'#index', 'class' : 'ui-btn-righ'}).html('Back').appendTo(mapHeader);
    var mapContent = $('<div>').attr({'data-role':'content'}).appendTo(mapPage);
    $('<div>').attr({'id':'map_canvas', 'style':'height:100%'}).appendTo(mapContent);
    $.mobile.changePage( "#map", { transition: "slide"});
    }
}

var weatherData = {
    response : null
}

Answer 1

我不知道這有多大幫助，也許別人會提供更好的解釋。

首先看起來像pageinit自jQuery.mobile 1.4.0以來已被折舊： https ：//api.jquerymobile.com/pageinit/他們建議用pagecreate替換它

但問題很明顯：在IE11中， pageinit和pagecreate都沒有被觸發。 因此按鈕onlcick永遠不會受到約束。 不確定它是IE的bug還是jsFiddle的......

只需用$(document).ready替換pageinit可以解決這個問題。 見小提琴： http ： //jsfiddle.net/frSsS/54/