jquery无法正常工作窗口调整大小

Question

在我的应用程序响应我有我的元素位置使用jQuery。它的工作很好。同时调整窗口大小（更大的分辨率到小）其工作正常，但在反向（小到大分辨率）原来不反映。

的js

(function ($) { 
$(document).ready(function() { 

var shareLink = $('#article_tools'); 
var social_alone = $(".social-share-custom"); 

if($(window).width() < 1026) { 
    var twitter_link = $('.follow_twit'); 
    var google_link = $('#google_responsive_container'); 
    twitter_link.before($('.follow_fb')); 
    twitter_link.after(google_link); 
    google_link.after($('.follow_feed')); 
} 
function setHeader(){ 

    if($(window).width() < 1026){ 
     var shareLink = $('#article_tools'); 
     if(shareLink.length > 0){ 
      shareLink.prepend($(".social-share-custom")); 
     } 
     else{ 
      var social_alone = $(".social-share-custom"); 
      $(".evt_detail_main").before(social_alone); 
     } 

    } 
    var primary=$('#primary'); 
    var temp=primary.find('>ul>li'); 
    var srctemp=primary.find(".links"); 
    if ($(window).width()<768) { 
     var search_container =$('#container-search'); 
     //var temp=$('#primary').find('>ul>li'); 
     shareLink.prepend($(".social-share-custom")); 
     $('.follow-login-wrapper').prepend($('#top-login')); 
     $('.responsive-menu').append($("#simplemenu")); 
     $('#logo-title').after(search_container); 
     $('#homemenu').after(temp); 
     $('#comments').before($('#sidebar-right').find('#sidebar-right-inner>#block-constant_contact-0')); 
     search_container.after($("#search-box")); 
    } 
    else { 
     srctemp.append(temp); 
    } 


}); 
$(window).resize(function() { 
    setHeader(); 

    }); 



setHeader(); 

    }); 

})(jQuery); 

我没有收到代码在$（窗口）.WIDTH（）< 768）从较小的分辨率大的调整适当的回应。（原始视图不反映）

Answer 1

(function ($) { 
$(document).ready(function() { 

var shareLink = $('#article_tools'); 
var social_alone = $(".social-share-custom"); 

if($(window).width() < 1026) { 
    // ... gets ONLY executed if condition is TRUE 
} 
function setHeader(){ 

    if($(window).width() < 1026){  

     // ... gets ONLY executed if condition is TRUE 

    } 
    var primary=$('#primary'); 
    var temp=primary.find('>ul>li'); 
    var srctemp=primary.find(".links"); 
    if ($(window).width()<768) { 

     // ... gets ONLY executed if condition is TRUE 

    } 
    else { 
     srctemp.append(temp); 
    } 
}); 
$(window).resize(function() { 
    setHeader(); 
    }); 
setHeader(); 
    }); 
})(jQuery);  

的问题是，当窗口具有正确的大小（在那个时候，当执行功能，它在你的情况的document.ready）你的函数只得到执行。

试试这个：

(function($) { 

    $(document).ready(function() { 
     //... include BOTH cases for the document ready event. 

      if ($(window).width() < 1200) { ...do something }; 
      if ($(window).width() < 700) { ...do something else }; 
    }; 

    $(window).resize(function() { 
     //... include BOTH cases for the window resize event. 

      if ($(window).width() < 1200) { ...do something }; 
      if ($(window).width() < 700) { ...do something else }; 
    }; 

})(jQuery);