Bootstrap tabs are not being clicked in WordPress loop

Question

I am trying to show some Bootstrap tab contents within a WordPress loop. The tabs are not being clicked.

Here are the bootstrap codes:

        <ul class="citenav nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab1" aria-selected="true">tab18</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab2" aria-selected="false">tab2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab3" aria-selected="false">tab3</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab4" aria-selected="false">tab4</a>
          </li>
        </ul>

        <div class="tab-content" id="myTabContent">
          <div class="cite tab-pane fade show active" id="tab1-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab1-tab">
              <?php echo "tab1 content"; ?>
          </div>
          <div class="cite tab-pane fade" id="tab2-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab2-tab">
              <?php echo "tab2 content"; ?>
          </div>
          <div class="cite tab-pane fade" id="tab3-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab3-tab">
            <?php echo "tab3 content"; ?>
          </div>
            <div class="cite tab-pane fade" id="tab4-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab4-tab">
            <?php echo "tab4 content"; ?>
          </div>
        </div>

        <style>
            .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: #495057;
            background-color: #fff;
            border-color: #ddd #ddd #fff;
        }

        .nav-tabs .nav-link {
            border: 1px solid transparent;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
        }
        .nav-link {
            display: block;
            padding: .5rem 1rem;
        }
        </style>

Also, please be noted that these codes are used as a template parts. I tried it in Ajax load more repeater template, then the tabs are working.

UPDATE: Adding JQuery external link within just solved the issue.

Answer 1

I think that's because Bootstrap use document.on('click', 'selector', function ).

This means that the function will execute only when the click event reached the document Node.

I tested and If you have a parent element which does not propagate the 'click' event, then that can be a reason of why your code doesn't work...

Ex:

parentNodeOfTab.on( 'click', function(){
   // Code

   return false;
} );

or

parentNodeOfTab.on( 'click', function( event){
   event.stopPropagation();

   // Code
} );

P.S: You can Google and read more about JavaScript propagation.