javascript - $(window).bind ("load", function(){} 事件

Question

好的，所以我有一个包含两个 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>

但是，当我尝试运行它时，我在控制台中收到此消息:

未捕获类型错误:对象 [object Object] 的属性“$”不是函数

我已经深入研究了大约 4 个小时，我已经放弃了希望...

谁能告诉我我做错了什么？？？

Answer 1

这听起来好像您没有在该代码上方的页面中包含 jQuery，或者您已经包含但某些东西已经接管了 $ 符号。

确保 jQuery 在代码之前加载，就像这样(这只是您可能使用的一个链接):

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

和/或如果你有那个但其他东西正在使用 $ 符号，你可以用你的代码来做到这一点:

(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);

它使用 jQuery 符号，将其作为 $ 参数传递给函数。即使 $ 是该函数的外部，内部，它也将是 jQuery。

---

旁注 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);

---

旁注 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);
});

不过，也许您等待图像是有原因的。