关于td中加A标签绑定事件所犯的错误
来源:互联网 发布:阿依莲淘宝假货 编辑:程序博客网 时间:2024/05/24 06:57
说实话其实自己敲的代码实在是很差,同组的大家都在用jquery的时候我还是在一行一行吭哧吭哧的敲js。
在写给一个表格动态添加一个td,给td中添加两个a标签,给a绑定onclick事件。一个a是删除,另一个弹出修改弹框。
这种效果:
``` var oTd1 = document.createElement('td');//动态创建一个td var oA = document.createElement('a');//动态创建一个a链接 oA.href = 'javascript:;'; oA.innerHTML = '<i class="fa fa-trash-o cur-p"><i>';//奥森图标 oA.onclick = function(){//给a绑定onclick事件 弹出弹框后输出本行 var r=confirm("确定删除吗?") if(r != true){ return; } else{ oTab.children[0].removeChild(this. parentNode.parentNode); } } oTd1.appendChild(oA);// 注意此句!把创建的a加入生成的td1中 oTd1.innerHTML += ' / ';//引起错误的代码!!!//生成第二个a标签加入同一个td内var oA2 = document.createElement('a'); oA2.href = 'javascript:;'; oA2.innerHTML = '<i class="fa fa-edit cur-p"><i>'; oA2.onclick = function modify(){//修改函数 //此处代码省略} oTd1.appendChild(oA2);//a2加入td1中 aTr[i].appendChild(oTd1);//将td1插入本行末尾位置
这样写出的代码,最后效果是点击第一个a没有触发onclick事件,但第二个a可以正常执行绑定事件。
错误在于 oTd1.innerHTML += ’ / ‘;
这样会导致给oA绑定的onclick事件失效,使a变成单纯的innerHTML内容。
这个bug调整了好久。。。和小伙伴找了半天都没找到,没人想到错误会是一句大家都没注意到的代码。
后来我是调整了两个a的创建、绑定代码顺序,发现无论哪个a,只要代码放在前面它的函数就不执行了,才想到是这句大家都忽略的代码出了问题。。
心累。
可算是改好了。
不过为了追求这种视觉效果,只能也用创建元素的方法加上这个该死的“/”
调整后的代码:
var oOr =document.createElement('span');oOr.innerHTML = ' / '; ……oTd1.appendChild(oA);oTd1.appendChild(oOr); //把这一句加在添加两个a之间oTd1.appendChild(oA2);
0 0
- 关于td中加A标签绑定事件所犯的错误
- 自定义标签中犯的小错误
- 我所犯的错误
- 自己在javascript中所犯的小错误
- a 标签绑定事件异常
- a标签绑定点击事件
- 使用<a>标签绑定事件
- 关于jsp中td标签的取值问题
- 关于<asp:DataGrid> 在Chrome中解析出的<td>会被<a>标签撑开的解决方案
- java之路所犯的错误
- td绑定点击事件
- HTML中关于动态创建的标签无法绑定js事件的解决方法
- td中通过button绑定click事件实现跳转,以及获取同一table中另一td的值
- 一些matlab中关于ezplot容易犯的小错误
- 关于动态生成的标签无法绑定事件
- 项目中所犯的错误(一路走来的教训)
- 实践建立工具类以及帮助文档的过程中所犯的错误
- 编程中犯的错误
- CentOS6.8下Django项目运行坏境搭建-django(三)
- row_number rank dense_rank ntile
- 编译Linux内核出现include/linux/compiler-gcc.h:106:30: fatal error: linux/compiler-gcc5.h错误
- 多线程解决窗口售票问题
- JavaScript学习总结【1】初识JS
- 关于td中加A标签绑定事件所犯的错误
- ecshop微信小程序接口插件
- MAC OSX10.12.x 使用Qt5.7出现的错误及解决方案
- 文件的基本操作-字符的读写
- 知识库--Reloader interface(47)
- sql语句 查询表中 每门课都大于80分的学生名称 根据以下三种 学习sql 中其他函数的使用
- Scala 的 yield 例子 (for 循环和 yield 的例子)
- 正则表达式中的基本正则规则详解01
- 【C#】39. 前台线程与后台线程