选择器 $(body) 工作但破坏代码（引用错误）而 $("body") 显示没有错误但不工作

Question

我有一个 JS 函数需要在 window 调整大小时调用。我发现让这个工作的唯一方法是使用：

    $(body).on('resize', function(){
        myFunction();
    });

有了这个，myFunction() 在 window 调整大小时执行。问题是我得到一个引用错误（body 未定义），所以我的 JS 的其余部分没有正确执行。

我尝试了不同的选择器：$("body"), $("document.body"), $(window), $(document),...引用错误，但是函数没有执行。

这是我的 html:

的样子（最小视图）

<html>
    <head> 
        <script src="jquery.js"></script>   
    </head>
    <body>
        [ Alot of things ...]
        <script src="main.js"></script>
    </body>
</html>

因此，jQuery 包含在我的 head 部分，而我的 JS 包含在关闭 body 标签之前。

现在这就是我的 main.js 文件：

myFunction(){
    alert("Hello world");
}

$(body).on('resize', function(){
    myFunction();
});

$(document).ready(function(){
    myFunction();
}

函数在页面加载时正常工作（使用 $(document).ready ）但我需要它在每个页面调整大小时运行。我进行了很多搜索来解决我的问题，但我被卡住了。如果答案微不足道，我深表歉意。我对 JS 和 DOM 元素选择器有点菜鸟。

编辑更多信息： 有问题的函数用于将多个 div 设置为相等的高度。你可以在这里找到它 Equal Height divs with jQuery。我的 div 组是 skelJS 网格系统的行。

所以最初的问题是，当我调整 window 大小时，div 没有调整大小以适应响应字体大小，所以我得到了溢出。显然我试图在 window/body 调整大小时调用该函数，但我无法让它工作，除非我使用 $(body) 选择器，这给了我一个参考错误，但随后溢出问题消失并正常运行运行s on resize.. 这真的很奇怪。我尝试了您所有的解决方案，似乎没有任何效果。

Answer 1

试试这个。 Window 是全局对象，不应有任何引用错误

function myFunction(){
        alert("Hello world");
    } 



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

Answer 2

您应该将调整大小附加到 window，而不是 document.body。

(function() {
    function resizeFnc() {
        console.log("resized called");
    }

    $(window).on("resize", resizeFnc); //calls it on resize
    $(resizeFnc); //calls it on document ready

}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(body)失败的原因是没有声明变量"body"。 $("body") 和 $(document.body) 失败的原因是事件未在主体上触发，因此未被调用。

以及您链接到的代码。

function equalHeight(group) {
    console.log("I was called");
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
 
$(function(){
    equalHeight($(".EqHeightDiv"));
});

$(window).on("resize", function(){
    console.log("resized called");
    equalHeight($(".EqHeightDiv"));
});

.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>

现在损坏的是您正在使用的脚本。调用了调整大小，它只是没有设置新的最大高度。 因此，正如所述 window 调整大小被触发，问题出在其他地方。

那么我们该如何解决这个问题？

var timer;
function equalHeight(group) {
  
    if (timer) window.clearTimeout(timer); //so this code is not called on every single resize
    timer = window.setTimeout( function () {
        var tallest = 0;
        group.height("");  //reset the heights
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }, 10);  
}
 
$(function(){
    equalHeight($(".EqHeightDiv"));
});

$(window).on("resize", function(){
    equalHeight($(".EqHeightDiv"));
});

.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>

Answer 3

$(document).ready(function(){ $(window).on('resize', function(){ myFunction(); }); });

这是实际操作：https://jsfiddle.net/6t987c28/

Answer 4

如果您想要更改或添加 class 到 <body>，则应该在您的函数中完成而不是调整大小 jQuery:

$(window).on('resize', function() {
    myFunction();
});

function myFunction() {
    $('body').css('background', 'green');
    // or
    $('body').addClass('selector-name');
}

选择器 $(body) 工作但破坏代码（引用错误）而 $("body") 显示没有错误但不工作

Selector $(body) works but break the code (reference error) while $("body") shows no error but dont work

html

javascript

jquery

jquery-selectors