Twitter bootstrap - Dynamically added tabs not working

Question

I am using Twitter bootstrap in my application. In a specific case, i need to add tabs dynamically after an ajax request.

I added the li tag for tab head and the respective content area with relevent id specified in href of the tab head anchor.

But the newly added tabs are not working with the bootstrap tabs. I even tried to refresh the tabs functionality by calling $("#tabs1").tabs() right after a new tab is added dynamically, but no use.

Please suggest me on how to use bootstrap tabs with dynamic data.

Note : But all other tabs which were there during page load works just fine.

Answer 1

You have to initialize the tabs by using $(...).on() instead of $(...).click(). On this way you can bind the click event to the parent #myTab-element and not directly to the child a-tags.

$("#myTab").on("click", "a", function(e){
  e.preventDefault();
  $(this).tab('show');
});

Now the click-Event will be bount to the #myTab-Element and delegated to the child a-Tags.

• here you can find a running demo
• read the jQuery doc for more info on "on Event Handlers"