那些遇到过的问题

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

Igo*_*yuk 5 html javascript css jquery bootstrap-4

我在我的网站中使用以下引导程序选项卡，从 ajax 请求动态生成。

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

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

这是代码片段...

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

$('#tab').on('click', 'a', function(e) {
  e.preventDefault()
  $(this).tab('show');
})
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

小智 0

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

\n\n

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

\n\n

\r\n
\r\n
$(\'#tab\').on(\'click\', \'a\', function(e) {\r\n  dataId = $(this).data(\'id\');\r\n  $("[id$=\'-tab\']").hide();\r\n  $(\'#\'+dataId+\'-tab\').show();\r\n  e.preventDefault();\r\n})
Run Code Online (Sandbox Code Playgroud)\r\n
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>\r\n<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>\r\n<nav class="nav-scroller py-1 pb-1 mb-2">\r\n  <div class="nav nav-tabs d-flex justify-content-between" id="tab" role="tablist">\r\n    <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"\r\n      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>\r\n    <a\r\n      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"\r\n        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>\r\n      <a\r\n        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>\r\n  </div>\r\n</nav>\r\n<div class="tab-content">\r\n  <div class="tab-pane fade show active" id="4-tab" role="tabpanel" aria-labelledby="4-men">\r\n    <div class="row">\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">PIZZE </h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac20,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">902</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac2,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">903</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac3,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">TORTE SALATE</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac20,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">904</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac4,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">905</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac5,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">PANETTONE GASTRONOMICO</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac20,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">906</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac6,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">907</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac7,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">FINGER FOOD</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac1,50</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">\r\n        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">\r\n          <img class="card-img-top img-fluid d-none" src="">\r\n          <div class="card-body">\r\n            <h3 class="card-title mb-0">901</h3>\r\n            <p class="card-text"></p>\r\n            <h2 class="text-right text-success price">\xe2\x82\xac1,00</h2>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class="tab-pane fade" id="12-tab" role="tabpanel" aria-labelledby="12-men">\r\n    <div class="row"></div>\r\n  </div>\r\n  <div class="tab-pane fade" id="13-tab" role="tabpanel" aria-labelledby="13-men">\r\n    <div class="row"></div>\r\n  </div>\r\n  <div class="tab-pane fade" id="14-tab" role="tabpanel" aria-labelledby="14-men">\r\n    <div class="row"></div>\r\n  </div>\r\n  <div class="tab-pane fade" id="15-tab" role="tabpanel" aria-labelledby="15-men">\r\n    <div class="row"></div>\r\n  </div>\r\n  <div class="tab-pane fade" id="17-tab" role="tabpanel" aria-labelledby="17-men">\r\n    <div class="row"></div>\r\n  </div>\r\n  <div class="tab-pane fade" id="18-tab" role="tabpanel" aria-labelledby="18-men">\r\n    <div class="row"></div>\r\n  </div>\r\n  <div class="tab-pane fade" id="19-tab" role="tabpanel" aria-labelledby="19-men">\r\n    <div class="row"></div>\r\n  </div>\r\n  <div class="tab-pane fade" id="20-tab" role="tabpanel" aria-labelledby="20-men">\r\n    <div class="row"></div>\r\n  </div>\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

1222 次

最近记录：

5 年，8 月 前
相关归档
使用Javascript创建SVG图形？ 79
剪辑/裁剪背景图像与CSS 67
Javascript ES6跨浏览器检测 60
如何更新Yarn中的全局包？ 59
如何在不使用组件的情况下从angular2路由重定向到外部URL？ 54
JavaScript中的行继续符 45
WebView,将本地.CSS文件添加到HTML页面？ 37
更改bootstrap导航栏背景颜色和字体颜色 33
Bootstrap 4 无线电验证 7
如何使用Bootstrap 4使文本环绕图像而没有浮动？ 3
难疑归档
如何在JavaScript中验证电子邮件地址？ 4099
如何检查列表是否为空？ 3235
在Python中查找包含它的列表的项目的索引 2887
如何决定何时使用Node.js？ 2198
Java内部类和静态嵌套类 1691
按值复制数组 1638
在JavaScript中生成两个数字之间的随机数 1635
如何重置MySQL中的AUTO_INCREMENT？ 1174
如何使用jQuery按名称选择元素？ 1160
如何旋转Android模拟器显示？ 1031