I am loading in some HTML into a page via Ajax that includes a new tabbable element. The only problem is that the tabs don't work because bootstrap has already been initialized. So I tried the following code that correctly targets the intended ul containing the tabs using jQuery. The tab isn't initializing, however.

Here is the HTML (loaded into the page after the DOM is initialized, via AJAX):

  

    
One
    
Two
    
Thre
  
  

    

      
Conten1
    
    

      
Conten2
    
    

      
Conten3
    
  

And then my javascript:

$('.nav-tabs').tab();

Seems like from what I read (http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/) that should initialize the tabs, but it doesn't do anything.

The problem is that despite initializing the tabs, nothing happens when I click on them. Even if I target a specific tab using the .tab('show') and it does show correctly. Still nothing happens when I click on the tabs.

Also, the tabs seem to work just fine if I add them after the fact with an append (see http://jsfiddle.net/HLj4N/9/ that appends the HTML above to a div after clicking a button). It appears that someone bootstrap.js has already initialized it when it is added.

Any thoughts on why clicking the tabs is doing nothing?