jQuery腳本因AJAX請求而延遲-如何解決？

Question

我正在制作一個簡單的響應式Wordpress主題，在那里只需要一頁，並且通過AJAX加載了內容，因此我具有AJAX功能：

jQuery(document).ready(function(){
        jQuery.ajaxSetup({cache:false});
        jQuery("#mainnav a").click(function(){
            var post_link = jQuery(this).attr("href");
            jQuery("body").load(post_link);
        return false;
        });
    });

它旨在在單擊菜單鏈接時加載整個頁面的內容（整個正文）。 而且效果很好。

但是問題是我有一個jQuery腳本，負責將div居中：

(function (jQuery) {
    jQuery.fn.centerAlign = function() {
        return this.each(function(i){ 
            var w = jQuery(this).width();
            var ow = jQuery(this).outerWidth();
            var ml = (w + (ow - w)) / 2; 
            var h = jQuery(this).height();
            var oh = jQuery(this).outerHeight();
            var mt = (h + (oh - h)) / 2;
        jQuery(this).css("margin-top", "-" + mt + "px");  
        jQuery(this).css("top", "50%");
        jQuery(this).css("margin-left", "-" + ml + "px");
        jQuery(this).css("left", "50%");
        jQuery(this).css("position", "absolute");
        });
    };
})(jQuery);

jQuery(document).ready(function() {
    jQuery("#content").centerAlign(); 
});

該腳本將#content div居中不變地重載，所以我的意思是沒有延遲。 div從一開始就是居中的。

問題是當我合並這些腳本時，因為在AJAX加載整個正文之后，#content div的位置未定位約1秒鍾（在頁面的左上角），然后又回到其位置。 因此，jQuery腳本會延遲運行。

我找不到該問題的解決方案，.on和.live對我不起作用。 我想我可以將每個頁面內容加載到#content div中，而不是整個“ body”中，但是我不知道如何制作它。

如果您能為我提供幫助，我們將不勝感激，因此它將僅通過動畫調整#content div的大小，而不是從頭開始放置它。

編輯：好的，我最終得到了這樣的代碼：

jQuery(function(){
       jQuery("#mainnav a").click(function(e){
               var content=jQuery("#content");
               jQuery.ajax({
                   url: jQuery(this).attr('href'),
                   dataType: "HTML",
                   beforeSend: function(){
                       content.empty();
                   },
                   success: function(){
                      content.load();
                   },
                   error : function(){
                       content.html("<p>Przepraszamy, ale strona jest chwilowo niedostępna</p>");
                   },
              });
              e.preventDefault();
       })
    })

它應該可以工作，但是問題是我無法弄清楚應該在那幾行中輸入什么：

success: function(){
                          content.load();

到那時為止。 我清除了#content div，但是當我放入content.load（“＃content”）;時， 它會加載整個頁面以及菜單和頁腳。 我只想加載#content內容。

編輯：

好。 Firebug顯示此代碼有效，但是在瀏覽窗口中的#content div中未顯示任何內容。

jQuery(function(){
       jQuery("#mainnav a").click(function(e){
               var content=jQuery("#content");
               var href=jQuery(this).attr('href');
               var text = jQuery(this).find('#content').html();

               jQuery.ajax({
                   url: jQuery(this).attr('href'),
                   dataType: "HTML",
                   beforeSend: function(){
                       content.empty();
                   },
                    success: function(){
                        content
                            .html(text)
                            .centerAlign();
                    },
                   error : function(){
                       content.html("<p>Content Unavailable</p>");
                   },
              });
              e.preventDefault();
       })
    })

Answer 1

您可以將居中對齊#content然后將其放置在體內。 像這樣

var $div = jQuery('<div/>').load(post_link);
$div.find('#content').first().centerAlign();
jQuery('body').html($div.html());

或僅加載內容部分

var $div = jQuery('<div/>').load(post_link);
jQuery('#content').first().html($div.find('#content').first().html());

Answer 2

我認為您使用新代碼的方向正確，您只需要填寫success功能即可：

success: function( html ){
    html = jQuery(html).find('#content').html();
    content.html(html).centerAlign();
},

或（使用th1rdey3的想法）：

success: function( html ){
    html = jQuery(html).find('#content').centerAlign().html();
    content.html( html );
},