Qfyilyi

Ive seen a lot of similar questions, but nothing that is quite like this (that I can find).

This is in a rails 5 app, bootstrap-sass 3.3, jquery 1.12.4.

$("#opendata").on("click", function(){

  $("<div class='tab-pane active' id='summary'>hi</div>").appendTo("#tab-content");

  $("<li class='active' data-toggle='tab'><a href='summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")

 })

I have 2 tabs that are loaded with the page, and need to add other tabs dynamically. The above code works - the tab is added, and the tab-pane contents are displayed. However if I navigate away from that tab, and navigate back (the tab itself will go active) the tab-pane is showing the contents of the previous tab.

I've narrowed the issue down to the dynamic tab-pane not getting an 'active' class put on it. I've tried to do this via console as well, and it doesn't work either.

The main solution I saw for dynamic tabs was to add something like this

jQuery(function($){

  $("tabs").on("click", "a", function(e){

    e.preventDefault();

    $(this).tab('show');

  })

})

But to no avail. It seems like the added tab-pane just doesn't respond to anything, console or otherwise. Am I missing something or going about this the wrong way? The tab gets added fine, just when navigating away and back that it doesn't respond.

so chalk this one up to looking at the same code for too long on my part. The solution is:

$("<li class='active' data-toggle='tab'><a href='#summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")

Notice the '#' in front of the href that I forgot in the first post.