动态生成时无法使引导选项卡工作

Posted 2023-05-08

技术标签:

【中文标题】动态生成时无法使引导选项卡工作【英文标题】：Unable to make bootstrap tab works when dynamically generated 【发布时间】：2021-05-24 21:55:58 【问题描述】：

我正在尝试使用引导程序制作导航选项卡，并使用从 API 获取的数据动态生成它。

在我获得数据后，我在创建 dom 元素的地方创建了所有 .appends，我已将所有属性正确设置为选项卡，但是当我单击另一个应该更改选项卡内容的导航项时，它会将“SHOW”设置为第一个选项卡和活动保持在最后一个导航，然后它只是中断并停止工作......

导航有一个静态和其他动态的第一个选项卡，这是我的功能，它将静态和动态项目附加到导航和选项卡内容：

var menu = [
  
    id: "001",
    desc: "Frutta",
    plu: [
      
        id: "123",
        desc: "Mela verde",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2.1,
      ,
      
        id: "234",
        desc: "Mela Rossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2,
      ,
      
        id: "456",
        desc: "Mela Siciliana",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1,
      ,
      
        id: "111",
        desc: "Mela Speciale",
        img: "assets/img/melerosse.jpeg",
        prezzo: 5,
      ,
      
        id: "222",
        desc: "Mela Grossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 3,
      ,
      
        id: "2341",
        desc: "Mela",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1.5,
      ,
    ],
  ,
  
    id: "002",
    desc: "Verdura",
    plu: [
      
        id: "222",
        desc: "Zucca",
        img: "assets/img/verdure.jpg",
        prezzo: 3,
      ,
      
        id: "222",
        desc: "Pomodoro",
        img: "assets/img/verdure.jpg",
        prezzo: 4,
      ,
      
        id: "222",
        desc: "Patate",
        img: "assets/img/verdure.jpg",
        prezzo: 3.1,
      ,
      
        id: "222",
        desc: "Zucchina",
        img: "assets/img/verdure.jpg",
        prezzo: 1.99,
      ,
    ],
  ,
];
function loadMenu(menu) 
  var nav = $(".menu .nav");
  var tasti = $(".tasti .tab-content");
  var cerca = $("<a>",  class: "flex-sm-fill text-sm-center nav-link" )
    .attr("data-toggle", "pill")
    .attr("href", "#cerca")
    .attr("aria-controls", "cerca")
    .attr("role", "tab")
    .attr("aria-selected", "false")
    .append($("<i>",  class: "fi-rs-search" ));

  var tabcerca = $("<div>",  class: "tab-pane" )
    .attr("id", "cerca")
    .attr("role", "tabpanel")
    .append(
      $("<div>",  class: "input-group mb-3" ).append(
        $("<input>", 
          class: "form-control virtual-keyboard",
        )
          .on("click", function () 
            KioskBoard.Run(".virtual-keyboard");
            $(this).focus();
          )
          .attr("type", "text")
          .attr("readonly", "readonly")
          .attr("data-kioskboard-type", "all")
          .attr("data-kioskboard-specialcharacters", "false"),
        $("<div>",  class: "input-group-append" ).append(
          $("<button>",  class: "btn btn-primary" )
            .attr("type", "button")
            .attr("data-trans", "cerca")
            .text("Cerca")
            .on("click", function () )
        )
      )
    );
  nav.append(cerca);
  tasti.append(tabcerca);
  menu.forEach((menu) => 
    nav.append(
      $("<a>",  class: "flex-sm-fill text-sm-center nav-link" )
        .attr("data-toggle", "pill")
        .attr("href", `#$menu.id`)
        .attr("aria-controls", menu.id)
        .attr("role", "tab")
        .attr("aria-selected", "false")
        .text(menu.desc)
    );

    tasti.append(
      $("<div>",  class: "tab-pane" )
        .attr("id", menu.id)
        .attr("role", "tabpanel")
        .append(
          $("<div>",  class: "row row-cols-4" ).append(
            menu.plu.map((plu) => 
              return $("<div>",  class: "col-auto" ).append(
                $("<div>",  class: "articolo" )
                  .append(
                    $("<img>").attr("src", plu.img),
                    $("<div>",  class: "desc" ).append(
                      $("<h4>").text(plu.desc)
                    )
                  )
                  .data("prezzo", plu.prezzo)
                  .on("click", function () 
                    addProdotto(
                      desc: plu.desc,
                      qta: "1",
                      prezzo: plu.prezzo,
                    );
                  )
              );
            )
          )
        )
    );
  );

  $(`a[href$="#$menu[0].id"]`).tab("show").tab("show");
  $(`#$menu[0].id`).addClass("show active");


loadMenu(menu);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
      <div class="menu">
        <nav class="nav-scroller mb-2">
          <div
            class="nav nav-pills flex-column flex-sm-row"
            role="tablist"
          ></div>
        </nav>
      </div>
      <div class="tasti">
        <div class="tab-content"></div>
      </div>

【问题讨论】：

它对我来说工作正常。你添加了 popper.js 吗？ @Swati 我正在使用包含它的 bootstrap.bundle，顺便说一下，如果我将导航选项卡设为静态，它可以正常工作.. 【参考方案1】：

我没有在您的代码中发现任何错误。但是，id 和 numbers 即：001,002..etc 不起作用，所以我只是在添加属性时附加一些带有 id 的文本，即：tab_yourmenuid，它开始工作了。

演示代码：

var menu = [
    id: "001",
    desc: "Frutta",
    plu: [
        id: "123",
        desc: "Mela verde",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2.1,
      ,
      
        id: "234",
        desc: "Mela Rossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2,
      ,
      
        id: "456",
        desc: "Mela Siciliana",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1,
      ,
      
        id: "111",
        desc: "Mela Speciale",
        img: "assets/img/melerosse.jpeg",
        prezzo: 5,
      ,
      
        id: "222",
        desc: "Mela Grossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 3,
      ,
      
        id: "2341",
        desc: "Mela",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1.5,
      ,
    ],
  ,
  
    id: "002",
    desc: "Verdura",
    plu: [
        id: "222",
        desc: "Zucca",
        img: "assets/img/verdure.jpg",
        prezzo: 3,
      ,
      
        id: "222",
        desc: "Pomodoro",
        img: "assets/img/verdure.jpg",
        prezzo: 4,
      ,
      
        id: "222",
        desc: "Patate",
        img: "assets/img/verdure.jpg",
        prezzo: 3.1,
      ,
      
        id: "222",
        desc: "Zucchina",
        img: "assets/img/verdure.jpg",
        prezzo: 1.99,
      ,
    ],
  ,
];

function loadMenu(menu) 
  var nav = $(".menu .nav");
  var tasti = $(".tasti .tab-content");
  var cerca = $("<a>", 
      class: "flex-sm-fill text-sm-center nav-link"
    )
    .attr("data-toggle", "pill")
    .attr("href", "#cerca")
    .attr("aria-controls", "cerca")
    .attr("role", "tab")
    .attr("aria-selected", "false")
    .append($("<i>", 
      class: "fi-rs-search"
    ));

  var tabcerca = $("<div>", 
      class: "tab-pane"
    )
    .attr("id", "cerca")
    .attr("role", "tabpanel")
    .append(
      $("<div>", 
        class: "input-group mb-3"
      ).append(
        $("<input>", 
          class: "form-control virtual-keyboard",
        )
        .on("click", function() 
          KioskBoard.Run(".virtual-keyboard");
          $(this).focus();
        )
        .attr("type", "text")
        .attr("readonly", "readonly")
        .attr("data-kioskboard-type", "all")
        .attr("data-kioskboard-specialcharacters", "false"),
        $("<div>", 
          class: "input-group-append"
        ).append(
          $("<button>", 
            class: "btn btn-primary"
          )
          .attr("type", "button")
          .attr("data-trans", "cerca")
          .text("Cerca")
          .on("click", function() )
        )
      )
    );
  nav.append(cerca);
  tasti.append(tabcerca);
  menu.forEach((menu) => 
    nav.append(
      $("<a>", 
        class: "flex-sm-fill text-sm-center nav-link"
      )
      .attr("data-toggle", "pill")
      .attr("href", `#tab_$menu.id`) //added text
      .attr("aria-controls", "tab_" + menu.id) //added text
      .attr("role", "tab")
      .attr("aria-selected", "false")
      .text(menu.desc)
    );

    tasti.append(
      $("<div>", 
        class: "tab-pane"
      )
      .attr("id", "tab_" + menu.id) //added text
      .attr("role", "tabpanel")
      .append(
        $("<div>", 
          class: "row row-cols-4"
        ).append(
          menu.plu.map((plu) => 
            return $("<div>", 
              class: "col-auto"
            ).append(
              $("<div>", 
                class: "articolo"
              )
              .append(
                $("<img>").attr("src", plu.img),
                $("<div>", 
                  class: "desc"
                ).append(
                  $("<h4>").text(plu.desc)
                )
              )
              .data("prezzo", plu.prezzo)
              .on("click", function() 
                addProdotto(
                  desc: plu.desc,
                  qta: "1",
                  prezzo: plu.prezzo,
                );
              )
            );
          )
        )
      )
    );
  );

  $(`a[href$="#tab_$menu[0].id"]`).tab("show").tab("show");
  $(`#tab_$menu[0].id`).addClass("show active");



loadMenu(menu);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="menu">
  <nav class="nav-scroller mb-2">
    <div class="nav nav-pills flex-column flex-sm-row" role="tablist"></div>
  </nav>
</div>
<div class="tasti">
  <div class="tab-content"></div>
</div>

【讨论】：

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

动态生成选项时如何使默认值在选择上起作用？ [复制]

如何将动态生成的URL重定向到另一个选项卡？

如何动态生成日期选择器引导日期禁用

Java Swing：从动态生成的 jTabbedPane 中获取值 [关闭]

如何从引导程序中的另一个页面激活动态选项卡？

带有活动选项卡的动态引导导航