Twitter Bootstrap: pin an action on a tab during initialization

Question

I want to attach an action (like a warning) to the Twitter Bootstrap tab when they initialize when the page loads.

I can apply 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 like this in the "initialize" event (or whatever this event triggers) at the beginning.

Answer 1

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

Then you put your own initialization and add a callback to simulate an event call.

 $('#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> 

Of course, there is a more standard way to do this with events and everyone, but it's simple and easy to implement.

Example (jsfiddle)