时间戳

首页 > 解决方案 > 代码未在多选项卡 Bootstrap 4 模式中触发

jquery - 代码未在多选项卡 Bootstrap 4 模式中触发

问题描述

我在 Bootstrap 4 中有一个模式，其中有多个选项卡，每个选项卡都用表格格式化。数据从 ajax 调用添加到表中，并且在启动时不存在。我想单击 a 并使用背景颜色突出显示，但无法触发代码。提取的代码片段如下：

<head>
<style
    td.highlight {
      background-color:yellow;
    }
</style>
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#getDetails">
  Open modal
</button>

  <!--  MODAL-->
  <div class="modal fade" id="getDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog roundbox shadow" role="document">
      <div class="modal-content" style="background-color:white;font-size:.85rem;">
        <div class="card" id="card2">
          <table width="100%">
            <tbody id="children">
              <tr height="24"><td>Children:</td><td>(none)</td></tr>
            <tbody>

          </table>
        </div>
        <div style="margin:10px;">
          <button type="button" class="btn btn-sm btn-danger" style="float:left;" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-sm btn-success" style="float:right;" onclick="saveDetails();">Submit</button>
        </div>
       </div>
    </div>
  </div>

 <script>
    $(function(){
      var code = '<tr height="24"><td>Children:</td><td class="kids" id="child0" data-id="2" data-gender="1"><span class="bname">SURNAME</span> John Ainsworth b.1945</td></tr>' + "\n"
       + '<tr height="24"><td></td><td class="kids" id="child1" data-id="1" data-gender="1"><span class="bname">SURNAME</span> David Neale b.1946</td></tr>' + "\n"
       + '<tr height="24"><td></td><td class="kids" id="child2" data-id="11" data-gender="1"><span class="bname">SURNAME</span> Phillip Robert b.1950</td></tr>' + "\n"
       + '<tr height="24"><td></td><td class="kids" id="child3" data-id="28" data-gender="0"><span class="bname">SURNAME</span> Margaret Lesley b.1951</td></tr>' + "\n";

      $('#getDetails table tbody#children').html(code);
    });

   // TOGGLE HIGHLIGHT
     $('td.kids').on("click", function(e) {
      if ($(this).hasClass("highlight")) {
        $(this).removeClass("highlight");
      } else {
        $(this).addClass("highlight");
      }
     });
  </script>
</body>

“突出显示”代码未触发。我查看了以前对类似问题的答案并尝试了所有建议，但无法使其正常工作。
有什么建议么？

标签： jqueryhtml

解决方案

这是因为您将元素动态添加到 dom - 因此您需要委托点击处理程序以应用突出显示类。

另外-您不需要条件逻辑来确定单击的元素是否具有类-只需使用toggleClass，如果该类不存在，它将添加该类，如果存在则将其删除。

 $("body").on("click", "td.kids", function(e) {
  $(this).toggleClass("highlight")
 });

另外-不确定它是否只是您发布的片段-但是您的样式声明中有错字-您没有关闭样式标签。

...<style ... should be ...<style> ...

推荐阅读