关于td中加A标签绑定事件所犯的错误

来源:互联网 发布:阿依莲淘宝假货 编辑:程序博客网 时间:2024/05/24 06:57

说实话其实自己敲的代码实在是很差,同组的大家都在用jquery的时候我还是在一行一行吭哧吭哧的敲js。

在写给一个表格动态添加一个td,给td中添加两个a标签,给a绑定onclick事件。一个a是删除,另一个弹出修改弹框。

这种效果:
最后一列既是js中生成的元素 删除是oA 修改是oA2

```    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
原创粉丝点击