jQuery函数不触发

Question

我的resizeAreas函数未在$(document).ready函数中触发。 这是应用程序的链接 。 我也试过$(document).load但结果相同。

此问题不一致。 但是大多数情况下，页面无法正确加载。 如果任务列表具有相同的高度，并且该行上有4个相等（与高度相同）的列表，则它们将正确加载，否则不会正确加载。 为了确保您看到它的外观，可以将任务元素从一个列表移动到另一个列表。 我没有发布图片的声誉。

这是大多数的javascript代码：

function makeDropArea() {
  var widthArea = $(".taskListing").width() / 2 - 55;
  var heightArea = $(".taskListing").height(); 

  $('.dropArea').width(widthArea);
  $('.dropArea').css('margin-left', 5 + 'px');
  $('.generalInfo').css('margin-left', 5 + 'px');
  $('.generalInfo').css('width', widthArea * 2 + 220 - 45);
  $('.subTaskHeader').css('width', widthArea + 25);
}

function makeDropElement(){
  var widthEl = $('.dropArea').width() + 25 ;
  $('.task').width(widthEl);
}

function taskListingSize(){

  var width = getWidth();
  var height = getHeight() * 80 / 100;
  $('.taskListing').css('width', width);
}


function resizeAreas() {
   $('.taskListing').each(function(){  

     var highestBox = 0;
     $('.dropArea', this).each(function(){

       if($(this).height() > highestBox) 
         highestBox = $(this).height(); 
     });  

     $('.dropArea',this).css('min-height', highestBox);  
   });    
}

$(document).ready(function () {
  menu();
  taskListingSize();
  makeDropArea();
  makeDropElement();
  resizeAreas();  //<-- this is the one with the problems

  $(".dropArea").resize(resizeAreas());

  $( window ).resize(function() {
    taskListingSize();
    makeDropArea();
    makeDropElement();
  });
});

谢谢。

更新1：

我做了更多测试，此错误仅适用于chrome和firefox，不适用于IE。 该问题仅出现在openshift平台上。

Answer 1

可以更改：

$(".dropArea").resize(resizeAreas());

至：

$(".dropArea").resize("resizeAreas");

要么：

$(".dropArea").resize(function(){
  resizeAreas();
});

Answer 2

我认为应该

 $(".dropArea").resize(resizeAreas);

要么

 $(".dropArea").resize(function(){
       resizeAreas();
  });