javascript - jquery函数不触发

Question

我的 resizeAreas 函数未在 $(document).ready 函数中触发。这是link到应用程序。我也尝试过 $(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();
});