Javascript 为什么在附加HTML后无法单击引导按钮？

HTML

#
单词
意思
类型

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

window.onload=function（）{
showAllWords（）；
}
函数showAllWords（）{
$.ajax({
url:“${pageContext.request.contextPath}/myWords/allWords”，
键入：“获取”，
async:false，
成功：功能（数据）{
$（'tbodyId'）.empty（）；
var trHTML=''；
var指数=1；
$.each（数据，函数（）{
trHTML+=“”；
$。每个（此，函数（k，v）{
if（k==“idWord”）{
trHTML+=“”+索引+“”；
索引++；
}
否则{
trHTML+=“”+v+“”；
}
});
trHTML+=“”；
trHTML+=“”；
trHTML+=“”；
});
$（'tbodyId'）.append（trHTML）；
}
});
}

输出：

---

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

您有

z-index:-1

，这将导致它无法读取（除非您的所有其他元素都是

-2

）。如果将其设置为0，则应修复它

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

具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素的前面

注：z索引仅适用于定位元素（位置：绝对、位置：相对或位置：固定）

window.onload=function（）{
showAllWords（）；
}
函数showAllWords（）{
$.ajax({
url:“${pageContext.request.contextPath}/myWords/allWords”，
键入：“获取”，
async:false，
成功：功能（数据）{
$（'tbodyId'）.empty（）；
var trHTML=''；
var指数=1；
$.each（数据，函数（）{
trHTML+=“”；
$。每个（此，函数（k，v）{
if（k==“idWord”）{
trHTML+=“”+索引+“”；
索引++；
}否则{
trHTML+=“”+v+“”；
}
});
trHTML+=“”；
trHTML+=“”；
trHTML+=“”；
});
$（'tbodyId'）.append（trHTML）；
}
});
}

#
单词
意思
类型
111
222
333

没有发布事件处理程序，但它可能没有被委派，每次都要替换元素，删除事件处理程序，因此需要委派事件处理程序。

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

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);
        }
    });
}