$(window).resize(); not working

Question

我有以下两个函数需要$(window).resize();和$(document).ready();才能工作。

我正在尝试通过删除 $(window).resize(); & $(document).ready(); 的副本来优化代码并缩短代码，并且只在文件中显示一次，然后将所有需要它们的函数包装在其中。

例如

function onResize(){
   //Grid system
   var gridElement = $(".gridElement", "#grid3");
   function GalleryGrid() {
      var grid3 = $('#grid3');
      var width = $(window).width();
      if (width < 1024 && width > 770) {
         var grid1 = $('#grid1');
         var grid2 = $('#grid2');
         for (var i = 0; i < gridElement.length; i++) {
            if (i < gridElement.length / 2) {
               grid1.append(gridElement[i]);
            } else {
               grid2.append(gridElement[i]);
            }
         }
      } else {
         grid3.append(gridElement);
      }
   }
   //Full screen
   function fullScreen() {
       var newHeight = $("html").height() + "px";
       $(".fullscreen").css("height", newHeight);
   }
}
$(document).ready(onResize);
$(window).resize(onResize);

整个代码用$(document).ready(function(){包装

但是，我围绕这种方法的所有尝试都在破坏代码，尤其是网格系统......根本行不通，我做错了什么？

Answer 1

我的理解是，您希望在收到 resize 事件时执行 onResize（） 函数。 你似乎与文档就绪的东西的工作方式有点不同步 - 我建议你阅读一些基本的jquery教程 - 但是，基本上，你想使用$（function（）....中的函数在文档完全加载后将事件处理程序应用于窗口。

在这里，您似乎 - 错误地 - 假设您正在运行的$（窗口）.resize...在调用$（docyument）.ready之后...会等到 .ready（） 函数执行，但这不是它的工作原理。 文档达到满载状态后应执行的代码应进入函数参数 $（）。

基本上，您希望将事件处理程序赋值放在 .ready（） 函数中，如下所示：

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