트위터 부트 스트랩이 표시되지 않음 이벤트가 발생했습니다.

Question

페이지/양식이 있습니다. colorbox에로드 중입니다. 페이지는 탭 섹션을 포함합니다. 탭은 colorbox 내에서 잘 작동하지만 새 탭이 표시된 후에는 colorbox의 크기를 조정해야합니다. 내가 트위터 부트 스트랩에서 샘플 코드를 사용하여 시도했다

: 나는 그러나 아무것도 해고되는 형태로 호출하는 메인 페이지에서이 배치 한

<script> 
$('a[data-toggle="tab"]').on('shown', function (e) { 
    e.target; // activated tab 
    e.relatedTarget; // previous tab 
    alert($(e.target).attr('href')); 
    colorbox.resize(); 
}) 
</script> 

. 이것은 폼이 컬러 박스가 호출 될 때까지 존재하지 않았기 때문이라고 가정합니다.

작업 탭이 포함 된 호출 된 페이지/양식에 스크립트를 추가했지만 다시는 아무 것도 실행되지 않습니다.

내 탭 마크 업입니다

<div class="tabbable tabs-left"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab">File/Image Upload</a></li> 
     <li><a href="#tab2" data-toggle="tab">Images</a></li> 
     <li><a href="#tab3" data-toggle="tab">Files</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1">content</div> 
     <div class="tab-pane active" id="tab2">content</div> 
     <div class="tab-pane active" id="tab3">content</div> 
    </div> 
</div> 

그래서 ... 다른 탭이 호출 된 페이지에 표시되어있는 페이지 나 스크립트를 배치해야 할 때 내가 colorbox의 크기를 조정할 수있는 방법?

감사

내부에 스크립트를 넣어

Answer 1

시도 ready

$(function(){ 

$(document).on('shown', 'a[data-toggle="tab"]', function (e) { 
    e.target; // activated tab 
    e.relatedTarget; // previous tab 
    alert($(e.target).attr('href')); 
    colorbox.resize(); 
}) 

}); 

데모 : Plunker

Answer 2

이 작동합니다 :

$(function(){ 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
    alert($(e.target).attr('href')); 
    colorbox.resize(); 
    }); 
}); 

Answer 3

을 부트 스트랩 3에서 다음 코드가 올바르게 크기 조정됩니다 스위치 탭의 컬러 박스 창 :

그것의

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    e.target; // activated tab 
    e.relatedTarget; // previous tab 
    $.colorbox.resize(); 
})