jQuery在窗口调整大小时无法正常工作

Question

In my application responsive i have my element position using jquery. Its works fine.And while resizing the window (bigger resolution to small)its work fine, But in reverse(small resolution to big) the original is not reflecting.

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); 

I am not getting proper response for code under $(window).width()<768)on resizing from smaller resolution to big one.(the original view not reflecting)

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);     

The Problem is, that your function ONLY gets executed when the window has the correct size (at that time, when the function is executed, which in your case is document.ready).

try this instead:

(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);