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：

我已经做了一些测试，这个bug只在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();
  });

jquery函数不会触发

2 个答案: