Javascript는 페이지 새로 고침 후에 만 ​​작동합니다.

Question

내 웹 사이트에서 두 div가 동일한 길이가되도록 온라인에서 찾은 일부 코드가 있습니다. 그러나이 코드는 페이지가 새로 고쳐진 후에 만 ​​작동하며이 문제를 일으키는 원인을 알지 못합니다. 어떤 도움을 주시면 감사하겠습니다!

// EQUAL HEIGHTS 
$.fn.equalHeights = function(px) { 
    $(this).each(function(){ 
     var currentTallest = 0; 
     $(this).children().each(function(i){ 
      if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } 
     }); 
    if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 
     // for ie6, set height since min-height isn't supported 
     if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } 
     $(this).children().css({'min-height': currentTallest}); 
    }); 
    return this; 
}; 

// just in case you need it... 
$.fn.equalWidths = function(px) { 
    $(this).each(function(){ 
     var currentWidest = 0; 
     $(this).children().each(function(i){ 
       if($(this).width() > currentWidest) { currentWidest = $(this).width(); } 
     }); 
     if(!px && Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified 
     // for ie6, set width since min-width isn't supported 
     if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); } 
     $(this).children().css({'min-width': currentWidest}); 
    }); 
    return this; 
}; 

// CALL EQUAL HEIGHTS 
$(function(){ $('#equalize').equalHeights(); }); 

Answer 1

이 문제는 플러그인이 제대로 작성되지 않았기 때문에 발생합니다. 나는 당신을 위해 그것을 수정했고 이제는 효과가있다.

Working DEMO

플러그인 스크립트 :

// EQUAL HEIGHTS 
    $.fn.equalHeights = function(px) { 
     var currentTallest = 0; 
     $(this).each(function(){ 
      $(this).siblings().each(function(i){ 
       if ($(this).height() > currentTallest) { 
       currentTallest = $(this).height(); 
       } 
      }); 
     }); 

     if (!px && Number.prototype.pxToEm) { 
     currentTallest = currentTallest.pxToEm(); 
     } 
     $(this).siblings().css({'height': currentTallest, 'min-height': currentTallest}); 
     return this; 
    }; 

이 플러그인으로 일할 수있는 equalWidths 플러그인을 수정할 수 있습니다.

Answer 2

모든 코드를 jquery 준비 함수에 넣으십시오. DOM 준비가되면 내부 준비 함수 코드가 실행됩니다.

$(document).ready(function(){ 
//your code 
});