javascript - 动态生成时引导选项卡不起作用

标签 javascript html jquery css bootstrap-4

我正在使用以下bootstrap tab在我的网站中，从 ajax 请求动态生成。

当我尝试这些选项卡的静态版本时，所有选项卡都运行良好，但现在当我按下选项卡时动态生成所有选项卡和 Pane 时，它只是没有将显示属性设置为其 Pane ..

由于内容是动态添加的，点击由 .on('click', 'a'..)

这是代码片段...

我只是找不到我生成的错误，因为动态代码等于静态代码..

$('#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>

最佳答案

不能 100% 确定原因。我怀疑这是因为引导事件处理程序没有被附加，正如您所说的选项卡是使用 ajax 请求生成的。

我在你的示例中使用了 javascript 并更改了选项卡。希望这可以帮助。 

$('#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>

关于javascript - 动态生成时引导选项卡不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61929421/

上一篇：html - 对单个文本使用两种文本颜色，例如基于背景颜色的蒙版

下一篇：javascript - Kendo Grid 设置屏幕大小调整时的最小列宽

相关文章：

html - 表格和屏幕阅读器

javascript - 弹出 Div 出现在按钮悬停时

javascript - 在页面中找到一串文本并在其周围包裹一些 span 标签

javascript - IE7 的 scrollIntoViewIfNeeded()

html - 我如何通过上传单个视频文件来获取任何html5视频的多种质量(360p，480p，720p)选择

javascript - jquery 如何使用子项获取父文本？

jquery - 从 jQuery 检测 iPhone

javascript - 鼠标悬停 - 想要使用鼠标悬停/鼠标移出功能弹出图像

javascript - 我想知道如何创建两个不受相同代码影响的可搜索表

javascript - Soundmanager 2，无论我尝试什么，我都无法设置 SWF 路径

©2024 IT工具网  联系我们