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