API openweathermap не работает в 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 никогда не связывается Не уверен, что это ошибка IE или jsFiddle's...

Просто заменить pageinit с $(document).ready исправил проблему для меня. Смотрите скрипку: http://jsfiddle.net/frSsS/54/