Show Bootstrap tab loaded with Ajax doesn't work on first click

I am trying to load the content of a given tab using Ajax.

I'm rendering the first tab active on the server, and the other tabs are active and loaded using Ajax.

The problem I've isolated (without Ajax) is here .

HTML：

<h1>Hello, tabs!</h1>

<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>

        </li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>

        </li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>

        </li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>

        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
    </div>
</div>

Javascript：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.preventDefault();

    var ref = $(this).attr('href').replace('#', '');

    var html = '<div role="tabpanel" class="tab-pane" id="' + ref + '">Brace yourself SW7 is coming. ' + ref + '</div>';

    var tabContent = $('.tab-content');

    if (!tabContent.find('.tab-pane#' + ref).length) {
        tabContent.append(html);
    }

    tabContent.find('.tab-pane#' + ref).tab('show');
});

The Home tab is rendered active. For example, click on the Profiles tab and it will add the content but not activate the tab. Now if you click the "Home" tab, and then the "Profiles" tab again, it will work fine.

Am I doing something wrong or is this "expected" behavior?