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

Posted

技术标签:

【中文标题】动态生成时引导选项卡不起作用【英文标题】：Bootstrap tabs not working while generated dynamically 【发布时间】：2020-09-07 18:47:35 【问题描述】：

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

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

随着内容是动态添加的，点击时由.on('click', 'a'..)组成

这里是代码 sn-p...

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

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

【问题讨论】：

【参考方案1】：

不能 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>

【讨论】：

我也想采用那个解决方案.. 但实际上在调试中附加了事件处理程序，达到了$(this).tab('show') .. 你可以在这里看到i.gyazo.com/7d63abd9fd54c0cf98f35996dbb279dc.mp4 当按下一个选项卡时click 被处理，甚至 aria-selected 的状态也被改变了..

以上是关于动态生成时引导选项卡不起作用的主要内容，如果未能解决你的问题，请参考以下文章

当我失去焦点时选项卡不起作用

在 UITabcontroller 中转到 3 选项卡不起作用

PyQt5，将文本添加到选项卡不起作用

为啥 jQuery ui 选项卡不起作用？

MySQL Workbench - 外键选项卡不起作用

为啥在条件格式公式中引用另一个 Google 表格选项卡不起作用？