jQuery window.resize無法正常工作

Question

伙計們，我寫了一個非常簡單的jquery腳本，將元素正確地放置在網頁上，基本上使它可以響應，而無需媒體查詢。 現在它可以正常工作，但是window.resize不會觸發，因此document.ready可以在窗口調整大小時不會觸發。 任何幫助將不勝感激。 將鏈接放在頁面底部

    // JavaScript Document
$(document).ready(PlaceContents);
$(window).ready(PlaceContents);
$(window).on('resize',PlaceContents);

function PlaceContents() {                

        var Wheight = $(document).height();
        var Wwidth = $(document).width();
        var contentPos = Wwidth/4;
        var contentH = Wheight/5;


        //adjust menubar height
        $('#menubar').height(Wheight);

        //center main content
        $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});


};

http://www.mobileapplicationlabs.com/goldentreehotels/

Answer 1

希望這是您想要的。

window.addEventListener('resize', function() {
    PlaceContents();
}, false);

Answer 2

您應該對此進行回調：

  $(document).ready(function(){ PlaceContents(); }); function PlaceContents() { var Wheight = $(document).height(); var Wwidth = $(document).width(); var contentPos = Wwidth/4; var contentH = Wheight/5; //adjust menubar height $('#menubar').height(Wheight); //center main content $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'}); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="maincontent" method="POST"> <input type="submit" value="menubar" name="menubar" id="menubar"> </form> 

Answer 3

您可以使用以下功能

$(window).bind("load resize", function () {
    PlaceContents();
});

希望這會幫助你。

Answer 4

好吧，您可以像這樣編寫相同的代碼：

頁面加載后以及在發生resize事件時，都會運行resize函數。

祝好運 ：）

$(document).ready(function(){   
    $(window).resize(function(){    
        var Wheight = $(window).height();
        var Wwidth = $(window).width();
        var contentPos = Wwidth/4;
        var contentH = Wheight/5;
        //adjust menubar height
        $('#menubar').height(Wheight);
        //center main content
        $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});      
    }).resize();
});

Answer 5

試試這個代碼：

$(document).ready(function(){   
    $(window).resize(function(){    
        var Wheight = $(window).height();
        var Wwidth = $(window).width();
        var contentPos = Wwidth/4;
        var contentH = Wheight/5;
        //adjust menubar height
        $('#menubar').height(Wheight);
        //center main content
  $("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});      
    });
});