jQuery를 사용하여 두 요소를 최대 크기로 조정

Question

누군가가 이러한 요소 중 하나에 링크하기 전에 열 레이아웃과 관련된 질문이 아닙니다.

동일한 높이가되고 싶은 페이지의 여러 영역에 두 개의 텍스트 상자가 있습니다. 그것들은 jQuery와 비동기 적으로 렌더링됩니다. 다음과 같이 데이터를로드합니다.

$.ajax({ 
    url: someUrl, 
    dataType: 'html', 
    type: 'GET', 
    success: function(data) { 
    $(mySelector).html(data) 
    }, 
    complete: function() { 
    adjustHeights() 
    } 
}) 

adjustHeights가 호출됩니다 (참고 자료는 내용이 잘려도 유효 함). 선택기는 적절한 요소도 반환합니다. 선택기와 일치하는 모든 항목의 높이를 얻은 다음 현재 항목의 최대 높이를 적용합니다 (예 : 높이가 38px이고 높이가 50px이므로 모두 50px를 반환합니다).

문제는 콘텐츠가로드 된 후 (예 : 버튼 클릭 또는 디버거를 사용하여) 여기에서 실행될 때 adjustHeights가 완벽하게 정상적으로 작동하지만 모든 것이 렌더링되기 전에 높이가 올라간다는 것입니다. 나는 커스텀 폰트 페이스가 부분을 연주하고 있을지도 모른다고 생각하지만 확실하지 않다.

jQuery에게 "진지하게 말하지 말고, 모든 것이 실제로 렌더링 될 때까지 실행하지 마십시오."라고 알리는 좋은 방법이 있습니까? 나의 이해는 이것이 이미 일어나야 만하지만 그렇지 않다는 것이다.

편집 CSS에있는 글꼴 또는 라인 높이를 제거하면이 문제가 해결됩니다.

Answer 1

시간 초과를 사용할 수 있습니다. 종종 DOM에 내용을 삽입 할 때 DOM이 완전히 업데이트되기 전에 연속적인 js가 실행됩니다. 이것은 DOM에서 내용을 대체 한 후 애니메이션을 바로 수행 할 때 가장 분명합니다.이 애니메이션은 육안으로 나타날 수 있으며 최종 상태로 곧바로 이동할 수 있습니다. 귀하의 경우에는 치수가 필요하기 전에 업데이트되지 않은 것 같습니다. A -이 약 (해키 앤드류가 오른쪽) 방법은 다음과 같습니다

setTimeout(adjustHeights, 0); 

Answer 2

다음을 시도한 적이 있습니까?

complete: function() { 
    $(document).ready(function() { 
     adjustHeights(); 
    }); 
} 

또한 '완료'정의 이후에는 쉼표가 없습니다.

희망이 도움이됩니다.