如何将功能延迟到加载动态页面的功能完成之后？

Question

So I have a setup where I have a layout page, then I have separate content pages that are loaded into the layout on click. The problem I'm having is initiating js only associated with those pages. It go and get the page and while it's loading it will initiate the other functions, I see it when I step through it.. then it disappears the minute the page actually loads. So I believe the problem is as the questions says, I need to return the loaded page and then make the js call.

This is one of my pages that is dynamically loaded on click, the morris(); is another function to load my google map.

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

This is the morris function..

   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

Simply add your morris() function in the second parameters of the load function like this:

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

JQuery load() documentation