Question

I want to attach an action (eg. alert) to a Twitter Bootstrap tab when they are initialized on page load.

I can attach an action to any subsequent tab event:

$('a[data-toggle="tab"]').on('show', function (e) {
    alert('tab shown');
}); 

But I would like to do something similar on the event ‘initialize’ (or whatever that event is called) at the start.

Answer 1

Instead of trying to bind on the initialized event which is not practical to implement, you should disable the auto-initialization by removing data-toggle="tab".

Then you put your own initialization, and add a callback to mimic the event calling.

$('#myTab .tab a').each(function() {
    var $this = $(this);
    $this.click(function (e) {
        e.preventDefault();
        $this.tab('show');
    });
    someCallback.call(this);
});

<ul class="nav nav-tabs" id="myTab">
    <li class="active tab"><a href="#home">Home</a></li>
    <li class="tab"><a href="#profile">Profile</a></li>
    <li class="tab"><a href="#messages">Messages</a></li>
    <li class="tab"><a href="#settings">Settings</a></li>
    <li><a href="#">Regularlink</a></li>
</ul>

There certainly is a more standard way to do this with events and all, but this is simple, and easy to implement.

Example (jsfiddle)