为什么Bootstrap按钮在追加HTML后无法点击？

Question

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后 '删除按钮'。所以，按钮不可点击。我该如何解决这个问题，或者我应该改变什么？

Answer 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>