Twitter bootstrap twitter引导程序未触发显示的事件

我有一个页面/表单正在加载到配色箱中。该页面包括一个选项卡部分。选项卡在colorbox中工作良好，但是一旦显示新选项卡，我需要调整colorbox的大小

我已经尝试使用twitter引导中的示例代码：

<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>

$（'a[data toggle=“tab”]”）。在（'show'，函数（e）上{
e、 target；//已激活选项卡
e、 relatedTarget；//上一个选项卡
警报（$（e.target.attr（'href'））；
colorbox.resize（）；
})

我已经把它放在了调用表单的主页面上，但是没有任何东西被触发。我认为这是因为表单在被调用之前并不存在，而是colorbox

我已经将脚本添加到被调用的页面/表单中，该页面/表单包含工作选项卡，但仍然没有触发任何内容

我的标签是：

<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的大小？我应该将脚本放在哪个页面

---

谢谢

尝试将脚本放入

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();
})

});

演示：

这应该可以：

$(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();
  });
});

---

在Bootstrap 3中，以下代码正确调整了switch选项卡上的Colorbox窗口的大小：

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

---

谢谢你=取得了进展。我已经在表单/页面中更改了上述脚本。如果我直接调用表单/页面，则警报框会正确显示，但是当通过colorbox加载时，不会触发事件