无法在使用Ajax调用MVC调用的局部视图中运行javascript

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