Bootstrap tabs not working while generated dynamically

user_9945307 0
Viewed 1842

I'm using the following bootstrap tab in my website, generated dynamically from ajax requests.

While i was trying the static version of those tabs all was working perfectly but now when i'm generating all tabs and pane dynamically when i press on the tab it just doesn't set the show attribute to it's pane..

As the content is added dynamically the on click is made of .on('click', 'a'..)

Here is the code snippet...

I just cant find what i'm generating wrong as the dynamic code is equals to static one..

$('#tab').on('click', 'a', function(e) {
  e.preventDefault()
  $(this).tab('show');
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<nav class="nav-scroller py-1 pb-1 mb-2">
  <div class="nav nav-tabs d-flex justify-content-between" id="tab" role="tablist">
    <a class="nav-item p-2 text-muted menu active" id="4-men" href="#4-tab" data-toggle="tab" role="tab" aria-controls="4-tab" aria-selected="true" data-id="4">RINFESCHI</a><a class="nav-item p-2 text-muted menu" id="12-men" href="#12-tab" data-toggle="tab"
      role="tab" aria-controls="12-tab" aria-selected="false" data-id="12">PRALINERIA</a><a class="nav-item p-2 text-muted menu" id="13-men" href="#13-tab" data-toggle="tab" role="tab" aria-controls="13-tab" aria-selected="false" data-id="13">CONFEZIONI</a>
    <a
      class="nav-item p-2 text-muted menu" id="14-men" href="#14-tab" data-toggle="tab" role="tab" aria-controls="14-tab" aria-selected="false" data-id="14">MENU 010</a><a class="nav-item p-2 text-muted menu" id="15-men" href="#15-tab" data-toggle="tab" role="tab" aria-controls="15-tab" aria-selected="false" data-id="15">STAGIONALI</a><a class="nav-item p-2 text-muted menu" id="17-men" href="#17-tab"
        data-toggle="tab" role="tab" aria-controls="17-tab" aria-selected="false" data-id="17">ACCONTO </a><a class="nav-item p-2 text-muted menu" id="18-men" href="#18-tab" data-toggle="tab" role="tab" aria-controls="18-tab" aria-selected="false" data-id="18">INGROSSO</a>
      <a
        class="nav-item p-2 text-muted menu" id="19-men" href="#19-tab" data-toggle="tab" role="tab" aria-controls="19-tab" aria-selected="false" data-id="19">VINI</a><a class="nav-item p-2 text-muted menu" id="20-men" href="#20-tab" data-toggle="tab" role="tab" aria-controls="20-tab" aria-selected="false" data-id="20">CAFFETTERIA</a>
  </div>
</nav>
<div class="tab-content">
  <div class="tab-pane fade show active" id="4-tab" role="tabpanel" aria-labelledby="4-men">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">PIZZE </h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€20,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">902</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€2,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">903</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€3,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">TORTE SALATE</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€20,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">904</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€4,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">905</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€5,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">PANETTONE GASTRONOMICO</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€20,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">906</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€6,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">907</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€7,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">FINGER FOOD</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€1,50</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">901</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€1,00</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="12-tab" role="tabpanel" aria-labelledby="12-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="13-tab" role="tabpanel" aria-labelledby="13-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="14-tab" role="tabpanel" aria-labelledby="14-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="15-tab" role="tabpanel" aria-labelledby="15-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="17-tab" role="tabpanel" aria-labelledby="17-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="18-tab" role="tabpanel" aria-labelledby="18-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="19-tab" role="tabpanel" aria-labelledby="19-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="20-tab" role="tabpanel" aria-labelledby="20-men">
    <div class="row"></div>
  </div>
</div>

bootstrap-4 css html jquery javascript
1 Answers

Not 100% sure on the cause. I suspect it is because the bootstrap event handlers are not being attached as you stated that the tabs are generated using ajax requests.

I played with the javascript in your example and got the tabs to change. Hope this helps. 

$('#tab').on('click', 'a', function(e) {
  dataId = $(this).data('id');
  $("[id$='-tab']").hide();
  $('#'+dataId+'-tab').show();
  e.preventDefault();
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<nav class="nav-scroller py-1 pb-1 mb-2">
  <div class="nav nav-tabs d-flex justify-content-between" id="tab" role="tablist">
    <a class="nav-item p-2 text-muted menu active" id="4-men" href="#4-tab" data-toggle="tab" role="tab" aria-controls="4-tab" aria-selected="true" data-id="4">RINFESCHI</a><a class="nav-item p-2 text-muted menu" id="12-men" href="#12-tab" data-toggle="tab"
      role="tab" aria-controls="12-tab" aria-selected="false" data-id="12">PRALINERIA</a><a class="nav-item p-2 text-muted menu" id="13-men" href="#13-tab" data-toggle="tab" role="tab" aria-controls="13-tab" aria-selected="false" data-id="13">CONFEZIONI</a>
    <a
      class="nav-item p-2 text-muted menu" id="14-men" href="#14-tab" data-toggle="tab" role="tab" aria-controls="14-tab" aria-selected="false" data-id="14">MENU 010</a><a class="nav-item p-2 text-muted menu" id="15-men" href="#15-tab" data-toggle="tab" role="tab" aria-controls="15-tab" aria-selected="false" data-id="15">STAGIONALI</a><a class="nav-item p-2 text-muted menu" id="17-men" href="#17-tab"
        data-toggle="tab" role="tab" aria-controls="17-tab" aria-selected="false" data-id="17">ACCONTO </a><a class="nav-item p-2 text-muted menu" id="18-men" href="#18-tab" data-toggle="tab" role="tab" aria-controls="18-tab" aria-selected="false" data-id="18">INGROSSO</a>
      <a
        class="nav-item p-2 text-muted menu" id="19-men" href="#19-tab" data-toggle="tab" role="tab" aria-controls="19-tab" aria-selected="false" data-id="19">VINI</a><a class="nav-item p-2 text-muted menu" id="20-men" href="#20-tab" data-toggle="tab" role="tab" aria-controls="20-tab" aria-selected="false" data-id="20">CAFFETTERIA</a>
  </div>
</nav>
<div class="tab-content">
  <div class="tab-pane fade show active" id="4-tab" role="tabpanel" aria-labelledby="4-men">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">PIZZE </h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€20,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">902</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€2,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">903</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€3,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">TORTE SALATE</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€20,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">904</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€4,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">905</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€5,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">PANETTONE GASTRONOMICO</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€20,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">906</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€6,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">907</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€7,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">FINGER FOOD</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€1,50</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">901</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€1,00</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="12-tab" role="tabpanel" aria-labelledby="12-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="13-tab" role="tabpanel" aria-labelledby="13-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="14-tab" role="tabpanel" aria-labelledby="14-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="15-tab" role="tabpanel" aria-labelledby="15-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="17-tab" role="tabpanel" aria-labelledby="17-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="18-tab" role="tabpanel" aria-labelledby="18-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="19-tab" role="tabpanel" aria-labelledby="19-men">
    <div class="row"></div>
  </div>
  <div class="tab-pane fade" id="20-tab" role="tabpanel" aria-labelledby="20-men">
    <div class="row"></div>
  </div>
</div>

user_134895880
Related