Twitter bootstrap - dynamically added tabs do not work

Question

I am using Twitter download in my application. In the specific case, I need to add dynamic tabs after the ajax request.

I added the li tag for the tab header and the corresponding content area with the corresponding identifier specified in the href of the tab header binding.

But recently added tabs do not work with boot tabs. I even tried updating the functionality of the tabs by calling $("#tabs1").tabs() right after adding a new tab, but not using it.

Please suggest me to use the boot tabs with dynamic data.

Note. But all the other tabs that were there while the page was loading work very well.

Answer 1

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

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

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

• here you can find a demo version
• read the jQuery doc for more information on "on event handlers"