Bootstrap shown.bs.tab event not working

Question

I\'m using the Flexy template (using bootstrap) and I can\'t get the shown.bs.tab event on tab to work.

I\'ve managed to make it work on JSFiddle.

Here is the co

Answer 1

The issue I faces was that I had 2 sets of tabs on my page. and I had already bound the 1st tab set with

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log(e.target.href);
})

For the 2nd tab set also i had defined the same way.. but I had assigned an id to the ul and bound the click element as:

  $('#tabId > li > a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      console.log(e.target.href);
    })

The 1st tab was working here but the 2nd wouldn't work. I then figured it out and assigned id's to both uls.. now it works