我有一个JS函数，我需要在窗口调整大小时调用它。 我发现这个工作的唯一方法是使用：
$(body).on('resize', function(){
myFunction();
});
这样，myFunction（）在窗口调整大小时执行。 问题是我得到一个引用错误（正文未定义），所以我的JS的其余部分没有正确执行。
我尝试了不同的选择器：$（＆＃34; body＆＃34;），$（＆＃34; document.body＆＃34;），$（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网格系统的行。
所以最初的问题是，当我调整窗口大小时，div没有调整大小以适应响应的字体大小，所以我得到溢出。 显然我试图在窗口/正文调整上调用该函数，但我不能让它工作除了如果我使用$（body）选择器，它给我一个引用错误，但然后溢出问题disapear和函数正确运行调整大小。这真的很奇怪。我尝试了所有的解决方案，似乎没有任何效果。 问题必须是BCAK。如果我们无法找到有效的解决方案，那么今天晚些时候我会用完整的代码回复您。谢谢
答案 0 :(得分：2)
您应该将调整大小附加到窗口，而不是附加到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)失败的原因是没有变量＆＃34; body＆＃34;声明。重新确定$("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>
现在破坏的是你正在使用的脚本。调用Resize，它只是没有设置新的最大高度。因此，正如所述窗口调整大小被触发，问题出在其他地方。
那么我们如何解决这个问题？
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>
答案 1 :(得分：1)
试试这个。 Window是一个全局对象，不应该有任何引用错误
function myFunction(){
alert("Hello world");
}
$(window).resize(function() {
myFunction();
});
答案 2 :(得分：1)
$(document).ready(function(){
$(window).on('resize', function(){
myFunction();
});
});
答案 3 :(得分：0)
如果您想要更改或添加一个类<body>，那么它应该在您的函数中完成而不是调整大小jQuery：
$(window).on('resize', function() {
myFunction();
});
function myFunction() {
$('body').css('background', 'green');
// or
$('body').addClass('selector-name');
}