id='delete' 按钮的点击事件无效，也不报错
0
悬赏园豆：5
[已解决问题]
解决于 2020-10-27 18:39
按钮的点击事件无效，也不报错
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;
}
}
})
最佳答案
0
这样会导致页面存在多个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){
//处理代码
}
收获园豆：5
怎么样呢
我试试
@Yimi依米: 你看看上面代码
如果你打算长期从事编程，还是先把基础的知识掌握好，最好在公司里有人指导，否则工作效率保证不了，技能提高会很慢。关键还是看你的自学能力和解决问题的能力，编程就要不断学习和解决问题。
另外，像这样的操作，你们公司应该要有专人负责写控件或是使用现成的比较好的控件，使用封装好的控件远比自己从头到尾写要好的多，因为随着需求的不断演化，你会发现问题会越来越多，所以一家好的公司是会考虑怎样合理安排人员，保证项目进度
https://www.runoob.com/jquery/jquery-tutorial.html
https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide/
https://docs.microsoft.com/zh-cn/aspnet/mvc/overview/getting-started/introduction/getting-started
好像还是不行
运行出来：<input type="button" value="删除" onclick="deleteFile(239c2e7b-e35c-4636-96c1-d619ea51700d)">
是不是deleteFile（）里面要加引号
@Yimi依米: 是的，加个单引号
@E行者: 大哥，这是好老的项目了。什么都得用最老的方法
@Yimi依米: 最起码得有人指导，要不然太费力了
@E行者: 不是二次开发，不知道是第几次开发，上一个提交代码的人都是12年的，早离职了
怎么调都不行，总有一个单引号变双引号
@Yimi依米:
"<td>" + "<input type='button' value='删除' onclick=\"deleteFile('"+fileTable[i].id+"')\"/> " + "</td>"
所以尽量不要拼接字符串，可以使用模板
https://www.cnblogs.com/isme-zjh/p/12018024.html
var content = $("#treeTableTpl").render(row);
$("#container").html(content);
其他回答(3)
1
动态追加的dom，这样绑定事件：$(document).on("click","#delete",function(){ //TODO });
0
楼上的老哥说的对，动态添加的元素，不能那样绑定事件
那怎么绑定啊
0
先给你看下生成表格的代码,你可以用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>
然后下一步
添加删除,前端实现视觉效果就可以了
function delecttr(obj) {
var tr = obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
在上述代码优化
<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>
<td>${ls[i][0]}</td>
<td>${ls[i][1]}</td>
<td>${ls[i][2]}</td>
<td><input type='button' id='delete' onclick=delecttr(this) value='删除'/> <th>
</tr>`
} else {
var tr_str = `
<tr>
<td>${ls[i][0]}</td>
<td>${ls[i][1]}</td>
<td>${ls[i][2]}</td>
<td><input type='button' id='delete' onclick=delecttr(this) value='删除'/> <th>
</tr>`
}
table_str += tr_str
function delecttr(obj) {
var tr = obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
}
document.querySelector('#new_table').innerHTML = table_str
</script>
下一步要不要传后端,你可以在input标签上加上点标记自定义个属性,然后进行ajax传输,完善 delecttr方法
