無法在使用ajax調用的部分視圖中運行javascript MVC

Question

我在獲取客戶端的地理位置的局部視圖中使用此JavaScript代碼。

<h1>Map</h1> 
<style type="text/css"> 
    #map-canvas { 
     height: 500px; 
    } 
</style> 

<script type="text/javascript" 
     src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script> 

<script type="text/javascript">   
    function initialize() { 

     var myLatlng = new google.maps.LatLng(37.4219985, -122.0839544); 
     var mapOptions = { 
      zoom: 12, 
      center: myLatlng 
     } 
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: 'Provider' 
     }); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

<div id="map-canvas"></div> 

從另一個角度來看，我正在進行Ajax調用，以在動作鏈接單擊上加載此部分視圖。

<script> 
    $(function() { 
     $('.provider-details').on('click', function (e) { 

      $.get("/Provider/Map", function (response) { 
       $('#map').html(response) 
      }); 

      e.preventDefault(); 
     }) 
    }); 
</script> 

我可以調用局部視圖，我可以看到文本;但是，地圖未加載。如果直接加載視圖，我可以看到地圖。有什麼建議麼？

Answer 1

您的初始化函數不會觸發，因爲它可能附着到窗口而不是正文。只需在ajax調用成功後調用它，你就可以很好地去：

$(function() { 
    $('.provider-details').on('click', function (e) { 

     $.get("/Provider/Map", function (response) { 
      $('#map').html(response); 
      initialize(); 
     }); 

     e.preventDefault(); 
    }) 
});