Question

我在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>

“突出显示”代码未触发。我已经浏览过类似问题的先前答案，并尝试了所有建议的方法，但无法使其正常工作。
有什么建议吗？

Answer 1

这是由于您将元素动态添加到dom的事实-因此，您需要委派单击处理程序才能应用突出显示类。

此外-您不需要条件逻辑来确定所单击的元素是否具有该类-只需使用toggleClass，它将在不存在的情况下添加该类，并在存在的情况下将其删除。

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

也-不确定是否只是您发布的摘录-但是yuou的样式声明中有错字-您没有关闭样式标签。

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

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

1 个答案: