innerHTML的一个BUG——丢失绑定事件04/23/2009
在编写一个后台的小应用的过程中,我碰到了这个bug,由于该系统之前已经开发完成,在验收阶段,客户要求加入这个快速输入的小功能,省却重复输入之烦恼。为了让程序在修改了千疮百孔之后依然显得可维护性很强,我不得不考虑动态创建元素。于是,在我快乐的敲入完代码以后,快乐的拿起鼠标点击生成的链接的时候。。。。点击链接的时候。。。。我点,我点。。。我连续的点击到我的鼠标明显的感到有意见的时候,程序都没有按照我的意愿去执行。什么原因呢?我们来看看我之前写的那段代码:
<script type="text/javascript">
onload = function()
{
var qi_cont=document.getElementById("quick_insert");
var zh_cn_goods_name=document.getElementsByName("goods_name")[0];
var zh_tw_goods_name=document.getElementsByName("goods_name_tw")[0];
var en_us_goods_name=document.getElementsByName("goods_name_us")[0];
var insert_prefix={"one":
{"zh_cn":["18K白金","18k彩金","G750白金","G750彩金","Pt900","PT950"],
"zh_tw":["18K白金","18k彩金","G750白金","G750彩金","Pt900","PT950"],
"en_us":["18Kgold","18kgold","G750gold","G750gold","Pt900","PT950"]
},
"two":
{
"zh_cn":["钻石戒指","钻石对戒","钻石套链","钻石吊坠","钻石耳钉","钻石耳环","钻石手链"],
"zh_tw":["鑽石戒指","鑽石對戒","鑽石套鏈","鑽石吊墜","鑽石耳釘","鑽石耳環","鑽石手鏈"],
"en_us":["ring","couple"," chain","Pendants","Earing","eardrop","Bracelet"]
}
};
qi_cont.innerHTML='';
/*遍历one*/
for(_a=0;_a<insert_prefix.one.zh_cn.length;_a++){
var insert_tag=document.createElement("a");
var txt=document.createTextNode(insert_prefix.one.zh_cn[_a]);
insert_tag.appendChild(txt);
insert_tag.href="#@";
insert_tag.setAttribute("rel",_a);
insert_tag.onclick=function(){
var ind=this.getAttribute("rel");
zh_cn_goods_name.value+=insert_prefix.one.zh_cn[ind];
zh_tw_goods_name.value+=insert_prefix.one.zh_tw[ind];
en_us_goods_name.value+=insert_prefix.one.en_us[ind];
};
qi_cont.appendChild(insert_tag);
qi_cont.innerHTML+=' ';//这里的innerHTML将导致onclick事件丢失
//下面是后来修正的代码
/*var blank=document.createTextNode(" ");
qi_cont.appendChild(blank);*/
}
var blank=document.createElement("<br />");
qi_cont.appendChild(blank);
}
</script>我明明绑定了onclick事件的,可是我不管怎么点击,都不会有任何响应,用firebug查看,终于发现onclick没有了~后经测试不管绑定什么事件,使用innerHTML对其进行连接时,在IE、FF下都同样会丢失掉,后来不得不规规矩矩的用createTextNode来创建一个空格然后append到里面,这不知道是不是为了安全考虑。
请看演示demo:http://x.zendstudio.net/libs/js-innerhtml-bug-demo/
406位童鞋围观 | 2条评论标签: bug、innerHTML、javascript、js

博主常常会发现很多有意思的 技术性很强的东西!
但往往这些细节都没发现过哈! 当然这个也和开发过程中接触到的东西有关!!
PS: 偶是在第一次正经(高中自学的时候基本是一个人弄这玩 很多东西并没系统的了解, 大学了以后才想着要好好拿本书去学)的学习JS的过程中发现的, 嘛 一直以为大家都知道了!
嗯,学习了~~~谢谢分享