1

我有一个网站（它使用jquery bbq），其中触发了 ajax 请求，并div在收到响应时替换了正文中的某个位置。类似于以下内容：

var mainContent = $('#main_content');
if ( cache[ url ] ) {
        mainContent.fadeOut(duration, function() {
            mainContent.html(cache[ url ]);
            mainContent.fadeIn(duration, function() {
                $(document).trigger("ajax_loaded");
            });
        });

    } else {

        mainContent.fadeOut(duration, function() {

            var postAjaxCallback = function() {
                cache[ url ] = mainContent.html();
                $(document).trigger("ajax_loaded");
            };

            $('#loading').fadeIn(duration, do_ajax(url, duration, postAjaxCallback));
        } );

    }

function do_ajax(linkVal, duration, callback) {

$.ajax({ 
    type: "GET",
    url: linkVal,
    dataType: "html",
    success: function(page){
        var mainContent = $('#main_content');
        mainContent.stop(true, true);

        if(parseInt(page)!=0)  
        {
            mainContent.html(page);
            $('#loading').fadeOut(duration, function() {
                mainContent.fadeIn(duration, callback);                 
            } );
        }
    }
    });
}

现在总的来说，这很好用。主页是这样的：

<html>
    <head>
       ...
    </head>
    <body>
        <div id="main_content");
           <p>Hello world!</p>
        </div>
    /body>
</html>

ajax 返回#page2类似于

<p>Hello to a different world!</p>

#page3它变得有点复杂。返回的ajax是：

<script type="text/javascript">
function initialize() {
  var mapOptions = {
    zoom: 11,
    streetViewControlOptions: true,
    center: new google.maps.LatLng(26.737792, 49.878273),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

loadScript();

$(document).bind("ajax_loaded", function() {
        console.log("map resize called");
        google.maps.event.trigger(map, 'resize');
});
</script>

现在第一次#page3加载，一切正常，控制台日志触发并调整地图大小（由于灰色区域问题需要调整大小）。现在我想要发生的是所有其他页面继续正常加载（通过ajax调用或从缓存中），并且当#page3再次导航到时（即#("main_content")从缓存中设置，resize事件再次触发。我想用最简单的术语来说,我正在尝试创建一个在每个 ajax 页面加载后触发的事件,并且我可以$(document).bind("ajax_loaded", function() {});在每个 ajax 检索到的页面上有一个自定义,可以进行我需要的任何后期处理.目前表现出的行为是什么都没有直到我加载#page3（正如我所提到的，地图已调整大小，一切都是肉汁）。之后，每个页面加载都会触发绑定功能并打印到控制台（我想这$(document)是合理的，因为我已将其绑定到尝试重新加载#page3，地图加载但没有调整大小（控制台仍然打印）所以我在地图上有灰色区域。任何人都可以用我有限的 javascript 经验帮助我正确处理工作流程。重申：

  • 每个 ajax 加载（或从缓存加载）都会触发一些事件
  • 在每个 ajax 页面（#page1等#page2）中，都会有一个从上述步骤触发的函数，可以对每个 ajax 页面进行唯一的设置。

谢谢您的帮助！

编辑 我尝试过使用以下内容：

mainContent.find("script").each(function(i) {
    eval($(this).text());
});

而不是触发ajax_loaded事件但无济于事。还有什么我可以尝试的吗？

4

1 回答 1

0

我相信当第二次添加 Google Maps API 时一切都会搞砸（重新加载#page3. 它会导致一些错误，并且脚本的其余部分可能会停止工作。尝试将 Google Maps API 的加载包装成 condition if (typeof google === 'undefined') { ...。

但老实说，整个概念可能需要一些重构:)。

于 2013-02-10T17:22:26.233 回答