为什么附加 HTML 后 Bootstrap 按钮不可点击？答案

【问题标题】：Why Bootstrap button is not clickable after append HTML?为什么附加 HTML 后 Bootstrap 按钮不可点击？
【发布时间】：2017-10-12 20:33:46
【问题描述】：

HTML;

<div class="col-lg-9" style="background-color:#ffffff; z-index:-1;">
    <h2 id="titleH2"></h2>
    <div class="table-responsive">
        <table class="table table-striped" id="tableId">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Word</th>
                    <th>Meaning</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody id="tbodyId">
            </tbody>
        </table>
    </div>
</div>

javascript; （页面加载时显示数据。）

window.onload = function(){
    showAllWords();
}

function showAllWords(){
    $.ajax({
        url: "${pageContext.request.contextPath}/myWords/allWords",
        type: "GET",
        async:false,
        success: function(data) {
            $('#tbodyId').empty();
            var trHTML = '';
            var index = 1;
            $.each(data, function() {
                trHTML += "<tr>";
                $.each(this, function(k, v) {
                    if(k == "idWord"){
                        trHTML += "<td>" + index + "</td>";
                        index++;
                    }
                    else{
                        trHTML += "<td>" + v + "</td>";
                    }
                });
                trHTML += "<td>";
                trHTML += "<input type=\"submit\" class=\"btn btn-primary\" value=\"Delete\">";
                trHTML += "</td>";
            });
            $('#tbodyId').append(trHTML);
        }
    });
}

输出：

附加 HTML 后，我无法单击“删除按钮”。因此，按钮不可点击。我该如何解决这个问题或者我应该改变什么？

【问题讨论】：

没有发布事件处理程序，但它可能不是委托的，并且您每次都替换元素，删除事件处理程序，因此您需要委托的事件处理程序。

标签： javascript html twitter-bootstrap html-table

【解决方案1】：

您拥有z-index:-1，这将导致它无法点击（除非您的所有其他元素都是-2）。将其设置为 0 应该可以修复它。

z-index 属性指定元素的堆叠顺序。

堆栈顺序较大的元素总是在堆栈顺序较低的元素之前。

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

window.onload = function() {
  showAllWords();
}

function showAllWords() {
  $.ajax({
    url: "${pageContext.request.contextPath}/myWords/allWords",
    type: "GET",
    async: false,
    success: function(data) {
      $('#tbodyId').empty();
      var trHTML = '';
      var index = 1;
      $.each(data, function() {
        trHTML += "<tr>";
        $.each(this, function(k, v) {
          if (k == "idWord") {
            trHTML += "<td>" + index + "</td>";
            index++;
          } else {
            trHTML += "<td>" + v + "</td>";
          }
        });
        trHTML += "<td>";
        trHTML += "<input type=\"submit\" class=\"btn btn-primary\" value=\"Delete\">";
        trHTML += "</td>";
      });
      $('#tbodyId').append(trHTML);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9" style="background-color:#ffffff; z-index:0;">
  <h2 id="titleH2"></h2>
  <div class="table-responsive">
    <table class="table table-striped" id="tableId">
      <thead>
        <tr>
          <th>#</th>
          <th>Word</th>
          <th>Meaning</th>
          <th>Type</th>
        </tr>
        <tr>
          <td>
            111
          </td>
          <td>
            222
          </td>
          <td>
            333
          </td>
          <td>
            <input type="submit" class="btn btn-primary" value="Delete">
          </td>
        </tr>
      </thead>
      <tbody id="tbodyId">
      </tbody>
    </table>
  </div>
</div>

【讨论】：