Html $(window).bind("load", function(){} 事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17637497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$(window).bind("load", function(){} event
提问by jparnell8839
Ok, so I have a parent div that contains two divs. The parent div will naturally be as tall as the tallest child div, dictated by content. However, I want the two child divs to be the same dynamic height, regardless of content. Thus, I resolved to JavaScript it. Here's what I have:
好的,所以我有一个包含两个 div 的父 div。父 div 自然与最高的子 div 一样高,由内容决定。但是,无论内容如何,我都希望两个子 div 具有相同的动态高度。于是,我决定使用 JavaScript 了。这是我所拥有的:
<!--- Make main div's same height -->
<script type="text/javascript">
$(window).bind("load", function() {
setDivHeight() {
var left = $('#primary');
var right = $('#secondary');
var maxHeight = Math.max(left.height(), right.height());
left.height(maxHeight);
right.height(maxHeight);
}
});
</script>
However, when I try to run it, I get this message in my console:
但是,当我尝试运行它时,我在控制台中收到此消息:
Uncaught TypeError: Property '$' of object [object Object] is not a function
Uncaught TypeError: Property '$' of object [object Object] is not a function
I've been digging into this for about 4 hours now, and I've given up hope...
我已经研究了大约 4 个小时,现在我已经放弃了希望......
Can anyone tell me what I'm doing wrong???
谁能告诉我我做错了什么???
回答by T.J. Crowder
It sounds like you don't have jQuery included in the page above that code, or you do but something has taken over the $
symbol.
听起来您没有在该代码上方的页面中包含 jQuery,或者您有但某些东西已经接管了该$
符号。
Ensure jQuery is loaded prior to the code, like so (this is just one link you might use):
确保在代码之前加载 jQuery,如下所示(这只是您可能使用的一个链接):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
And/or if you have that but something else is using the $
symbol, you can do this with your code:
和/或如果你有这个但其他东西正在使用这个$
符号,你可以用你的代码来做到这一点:
(function($) {
$(window).bind("load", function() {
// v----- Side note: This looks like a syntax error
setDivHeight() {
var left = $('#primary');
var right = $('#secondary');
var maxHeight = Math.max(left.height(), right.height());
left.height(maxHeight);
right.height(maxHeight);
}
});
})(jQuery);
That uses the jQuery
symbol, passing it into a function as the $
argument. Even if $
is something else outsidethat function, withinit, it will be jQuery
.
使用jQuery
符号,将其作为$
参数传递给函数。即使$
是该函数之外的其他东西,在它内部,它也会是jQuery
.
Side note 1: Your code contains a syntax error. Perhaps you meant:
旁注 1:您的代码包含语法错误。也许你的意思是:
(function($) {
$(window).bind("load", function() {
var left = $('#primary');
var right = $('#secondary');
var maxHeight = Math.max(left.height(), right.height());
left.height(maxHeight);
right.height(maxHeight);
});
})(jQuery);
Side note 2: The window load
event happens verylate in the load process, after all images are loaded. That may be what you want (for instance, if the height of the divs is partially dictated by images), but if not you might want to use ready
instead (in this case, using one of its shortcuts), as it happens sooner:
附注2:窗口load
事件发生非常负载过程后期,所有的图像加载后。这可能是您想要的(例如,如果 div 的高度部分由图像决定),但如果不是,您可能想ready
改用(在这种情况下,使用其快捷方式之一),因为它会发生得更快:
jQuery(function($) {
var left = $('#primary');
var right = $('#secondary');
var maxHeight = Math.max(left.height(), right.height());
left.height(maxHeight);
right.height(maxHeight);
});
Again, though, maybe you're waiting for the images for a reason.
不过,也许您正在等待图像是有原因的。