首页 新闻 会员 周边

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

清风画酒的主页 清风画酒 | 菜鸟二级 | 园豆:235
提问于:2020-10-27 10:55
< >
分享
最佳答案
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
E行者 | 小虾三级 |园豆:1761 | 2020-10-27 11:24

怎么样呢

清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 11:33

我试试

清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 11:39

@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

E行者 | 园豆:1761 (小虾三级) | 2020-10-27 11:42

好像还是不行

清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 11:48

运行出来:<input type="button" value="删除" onclick="deleteFile(239c2e7b-e35c-4636-96c1-d619ea51700d)">

是不是deleteFile()里面要加引号

清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 11:51

@Yimi依米: 是的,加个单引号

E行者 | 园豆:1761 (小虾三级) | 2020-10-27 11:52

@E行者: 大哥,这是好老的项目了。什么都得用最老的方法

清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 11:52

@Yimi依米: 最起码得有人指导,要不然太费力了

E行者 | 园豆:1761 (小虾三级) | 2020-10-27 11:54

@E行者: 不是二次开发,不知道是第几次开发,上一个提交代码的人都是12年的,早离职了

清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 11:58

怎么调都不行,总有一个单引号变双引号

清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 12:47

@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);
E行者 | 园豆:1761 (小虾三级) | 2020-10-27 18:28
其他回答(3)
1

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

顾星河 | 园豆:7240 (大侠五级) | 2020-10-27 11:03
0

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

不知道风往哪儿吹 | 园豆:2035 (老鸟四级) | 2020-10-27 11:06

那怎么绑定啊

支持(0) 反对(0) 清风画酒 | 园豆:235 (菜鸟二级) | 2020-10-27 11:32
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>

小小咸鱼YwY | 园豆:3312 (老鸟四级) | 2020-10-27 14:26
然后下一步
添加删除,前端实现视觉效果就可以了
        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>


支持(0) 反对(0) 小小咸鱼YwY | 园豆:3312 (老鸟四级) | 2020-10-27 14:46

下一步要不要传后端,你可以在input标签上加上点标记自定义个属性,然后进行ajax传输,完善 delecttr方法

支持(0) 反对(0) 小小咸鱼YwY | 园豆:3312 (老鸟四级) | 2020-10-27 14:47
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册