Yii Bootster - TbTabs更改标签事件

How can I control a change of tab event when using TbTabs in Yii Bootter?

Here is my code (but it didn't alert when I have changed tab):

$this->widget('bootstrap.widgets.TbTabs', array(
        'type' => 'tabs',
        'tabs' => array(
            array('label' => 'Trainer Modules', 'content' => 'content tab 1',
            array('label' => 'Default Modules', 'content' => 'content tab 2',
        ),
        'events' => array(
            'change' => "js:function(){alert('123');}"
        )
    ));

Just for the future reference, one solution to control Tab clicks on TbTabs is to assign Id to each tab and handle the event using ClientScript, Here is how it works:

Assign id to each link like this:

$this->widget('bootstrap.widgets.TbTabs', array(
    'type'=>'tabs',
    'placement'=>'above', // 'above', 'right', 'below' or 'left'
    'tabs'=>array(
        array('label'=>'Section 1', 'active'=>true, 'linkOptions' => array('id'=>'link1')),
        array('label'=>'Section 2', 'linkOptions' => array('id'=>'link2')),
    ),
));

Then register your js using CClientScript

Yii::app()->clientScript->registerScript("link1Click", "$('#link1').click(function(){alert('link1 is clicked');})");
Yii::app()->clientScript->registerScript("link1Click", "$('#link2').click(function(){alert('link2 is clicked');})");

Tabs are ul and li element. They don't have change event.

see the code:

foreach ($this->events as $name => $handler)
    {
        $handler = CJavaScript::encode($handler);
        $cs->registerScript(__CLASS__.'#'.$id.'_'.$name, "jQuery('#{$id}').on('{$name}', {$handler});");
    }

it similar: $('ul').on('change', function () { alert('123'); }); => not work.

TbTab is working fine but there is no change event for Bootstrap Tab.
You can find Bootstrap Tab js documentation (applicable events) here:

So your code needs a little change to work:

$this->widget('bootstrap.widgets.TbTabs', array(
        'type' => 'tabs',
        'tabs' => array(
            array('label' => 'Trainer Modules', 'content' => 'content tab 1',
            array('label' => 'Default Modules', 'content' => 'content tab 2',
        ),
        'events' => array(
            'show.bs.tab' => "js:function(tab){console.log(tab); alert(tab);}" // Occurs when the tab is about to be shown.
            'shown.bs.tab' => "js:function(tab){console.log(tab); alert(tab);}" // Occurs when the tab is fully shown (after CSS transitions have completed)
        )
    ));

Real credit should go to Another Stack Question