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

但问题很明显:pageinit 和 pagecreate 都没有在 IE11 中触发。因此按钮 onlcick 永远不会被绑定(bind)。不确定是 IE 错误还是 jsFiddle 的...

只需将 pageinit 替换为 $(document).ready 即可解决我的问题。参见 fiddle : http://jsfiddle.net/frSsS/54/