0

我正在制作一个简单的响应式 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;
        });
    });

它旨在通过单击菜单链接加载整个页面内容（整个正文）。而且效果很好。

但问题是我有一个负责将内容 div 居中的 jQuery 脚本：

(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中，而不是整个“正文”，但我不知道如何制作。

如果你能帮助我，我会很感激，所以它只会用动画调整#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();
       })
    })
4

2 回答 2

0

我认为你的新代码走在正确的轨道上，你只需要填写你的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 );
},
于 2013-11-10T22:18:20.173 回答
0

#content您可以在将其放入主体之前进行centerAlign 。像这样的东西

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());
于 2013-11-10T17:57:49.167 回答