$(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>

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

Uncaught TypeError: Property '$' of object [object Object] is not a function

我现在已经挖了大约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);
});

尽管如此,也许你正在等待图像是有原因的.