id='delete' 按钮的点击事件无效，也不报错

Question

按钮的点击事件无效，也不报错

js代码：
for (var i = 0; i < fileTable.length; i++) {

                    var $trTemp = $("<tr></tr>");
                    $trTemp.append("<td>" + "<input type='button' id='delete' value='删除'/> " + "</td>");
                    $trTemp.append("<td>" + fileTable[i].FileName + "</td>");
                    $trTemp.append("<td>" + fileTable[i].NameCh + "</td>");
                    $trTemp.append("<td>" + fileTable[i].UserId + "</td>");
                    //$trTemp.append("<td>" + fileTable[i].UploadDate + "</td>");
                    $trTemp.append("<td>" + "2020-10-27 9:55:22" + "</td>");
                    $("#TbData").append($trTemp);
                    $trTemp.appendTo("#TbData");
                }

js方法：
$("#delete").click(function (check) {
var message = "";
$.ajax({
type: 'POST',
url: "/Attendance/DeleteFile/",
data: formData,
processData: false,
contentType: false,
success: function (data) {
if (data != null) {
fileTable = data.FileTableList;
}
}
})

Answer 1

这样会导致页面存在多个id为delete的按钮，这显然是不对的，id应该唯一

应该这样处理

 var btnDelete=$("<input type='button' id='delete' value='删除'/> " );
 btnDelete.click(function(){
  //处理代码
}); 
var td=$("<td></td>");
td.append(btnDelete);

或者

$trTemp.append("<td>" + "<input type='button' value='删除' onclick='deleteFile(\"+fileTable[i].id+\")'/> " + "</td>");

//全局方法
function deleteFile(id){
  //处理代码
}

Answer 2

楼上的老哥说的对，动态添加的元素，不能那样绑定事件

Answer 3

先给你看下生成表格的代码,你可以用es6的写法 ++++啥的有点过时且比较乱

是反引号
var x = `aaa${变量名}aaaa`

<table id="new_table"></table>
<script>
    var ls = [['a', 1, 2], ['b', 2, 3]];
    var table_header = ['FileName', 'NameCh', 'UserId'];
    var table_str = ''
    for (var i = 0; i < ls.length; i++) {
        console.log(i);
        if (i == 0) {
            var tr_str = `
        <tr>
            <th>${table_header[0]}</th>
            <th>${table_header[1]}</th>
            <th>${table_header[2]}</th>
            <th>删除键功能</th>
        </tr>
                <tr>
            <th>${ls[i][0]}</th>
            <th>${ls[i][1]}</th>
            <th>${ls[i][2]}</th>
            <th><input type='button' id='delete' value='删除'/> <th>
        </tr>`
        } else {
            var tr_str = `
        <tr>
            <th>${ls[i][0]}</th>
            <th>${ls[i][1]}</th>
            <th>${ls[i][2]}</th>
            <th><input type='button' id='delete' value='删除'/> <th>
        </tr>`
        }
        table_str += tr_str
    }
    console.log(table_str)
    document.querySelector('#new_table').innerHTML=table_str
</script>

Answer 4

动态追加的dom，这样绑定事件：$(document).on("click","#delete",function(){ //TODO });