如何延迟函数直到加载动态页面的函数完成？

Question

所以我有一个设置，其中有一个布局页面，然后我有单独的内容页面，这些页面在单击时加载到布局中。我遇到的问题是启动仅与这些页面关联的 js。它去获取页面并在加载时启动其他功能，当我逐步执行它时我会看到它..然后它在页面实际加载的那一刻消失。所以我相信问题正如问题所说，我需要 return 加载页面然后进行 js 调用。

这是我的页面之一，在单击时动态加载，morris()；是加载我的 google 地图的另一个函数。

$("#production").click(function () {
       $("#content").load("content/Mobile_Production.html");
       morris();
   });

这是莫里斯函数..

   function map() {
    var locations = [['<h4>Office</h4>', 39.9629369, -105.1710262], ['<h4>Office</h4>', 39.388755, -107.082249], ['<h4>Office</h4>', 42.300884, -71.801840]];
    var iconURLPrefix = 'IMAGE HERE';
    var icons = [iconURLPrefix + 'cec-icon1.png', iconURLPrefix + 'cec-icon1.png', iconURLPrefix + 'cec-icon1.png']
    var icons_length = icons.length;
    var shadow = { anchor: new google.maps.Point(15, 33), url: iconURLPrefix + 'msmarker.shadow.png' };
    var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: new google.maps.LatLng(38.318426, -97.985179), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl: false, panControl: false, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM } });
    var infowindow = new google.maps.InfoWindow({ maxWidth: 160 });
    var marker;
    var markers = new Array();
    var iconCounter = 0;
    for (var i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3]), map: map, icon: icons[iconCounter], shadow: shadow });
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
        iconCounter++;
        if (iconCounter >= icons_length) {
            iconCounter = 0;
        }
    }

    function AutoCenter() {
        var bounds = new google.maps.LatLngBounds();
        $.each(markers, function(index, marker) {
            bounds.extend(marker.position);
        });
        map.fitBounds(bounds);
    }

    AutoCenter();
}

Answer 1

只需在加载函数的第二个参数中添加您的 morris() 函数，如下所示：

$("#production").click(function () {
       $("#content").load("content/Mobile_Production.html", morris);
});

JQuery load() documentation

如何延迟函数直到加载动态页面的函数完成？

How can I delay a function until after a function which loads a dynamic page is finished?

html

javascript

jquery

dynamic

onload