Ajax调用后的addClass

时间:2013-08-29 08:42:02

标签: javascript ajax

简单的东西, 在下面的脚本中,我将“mobile”类添加到元素中。

脚本的目标是通过基于屏幕分辨率的require.js为我的主题提供响应功能。

它应该几乎是不言自明的,但我不明白为什么它只是插入主页:如果我打开其他任何页面,那么移动类就不存在。

(function($) {
var htmlCache = { desktop: null, mobile: null };

var reload_page = function(mobile) {
  var bodyHtml = '';

  if(mobile && htmlCache.mobile)
    bodyHtml = htmlCache.mobile;
  else if(!mobile && htmlCache.desktop)
    bodyHtml = htmlCache.desktop;
  else
    $.ajax(location.href, {
      type: 'POST',
      async: false,
      data: {
        ajax: 1,
        force_mobile: mobile ? 1 : null
      },
      success: function(data)
        {
          if(mobile) {
            htmlCache.mobile = data;
          }
          else
            htmlCache.desktop = data;
          bodyHtml = data;
        },
      dataType: 'html'
    });

  $('body').html(bodyHtml);
};

$(function() {
  // Be responsive only on desktop
  if($('body').hasClass('mobile')) {
    return;
  } else {
    htmlCache.desktop = $('body').html();

    enquire.register('screen and (max-width:1080px)', {
      match: function() {
        reload_page(true);
        $('body').addClass('mobile');
        $('<link />', {
          rel: 'stylesheet',
          id: 'mobile-css',
          href: 'http://dev.andreapuiatti.com/dev0/wp-content/themes/spk/mobile.css?ver=3.6',
          media: 'all'
        }).appendTo('head');
      },
    });

    enquire.register('screen and (min-width:1081px)', {
      match: function() {
        reload_page(false);
        $('body').removeClass('mobile');
        $('#mobile-css').remove();
      },
    });
  }
});
})(jQuery);

0 个答案:

没有答案