无法在使用 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();
    })
});