8.4.2 How to get value of selected nav-tabs?

Permalink
<ul class="nav nav-tabs" id="ccm-tabs">
    <li class="active"><a href="#" data-tab="all"><?php echo t('All'); ?></a></li>
    <?php foreach ($groups as $group) { ?>
        <li><a href="#" data-tab="<?php echo strtolower($group->getGroup()); ?>"><?php echo t($group->getGroup()); ?></a></li>
    <?php } ?>
</ul>
<div class="ccm-tab-content" id="ccm-tab-content-all">
    <h1><?php echo t('All Properties'); ?></h1>
</div>
<?php foreach ($groups as $group) { ?>
    <div class="ccm-tab-content" id="ccm-tab-content-<?php echo strtolower($group->getGroup()); ?>">
        <h1><?php echo t('Properties for') . ' ' . $group->getGroup(); ?></h1>
    </div>
<?php } ?>

$('.nav-tabs a').on('shown.bs.tab', function(e){
        console.log('xxx');
    });

The above doesn't work. How can I get a value of a selected nav-tabs?

Thank you.

linuxoid
 
JohntheFish replied on at Permalink Reply
JohntheFish
That doesn't work because the selector is evaluated once, not dynamically. You need to use the 3-parameter version of the event handler and put the selector in that.
linuxoid replied on at Permalink Reply
linuxoid
$("#ccm-tabs").on('shown.bs.tab', 'a[data-tab]', function(e){
    console.log('ok');

doesn't work either