您当前位于: 首页 » PHP » innerHTML的一个BUG——丢失绑定事件

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+='&nbsp;';//这里的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条评论标签:  

2条评论
  1. 豬頭炖蘑菇 说:

    博主常常会发现很多有意思的 技术性很强的东西!
    但往往这些细节都没发现过哈! 当然这个也和开发过程中接触到的东西有关!!

    PS: 偶是在第一次正经(高中自学的时候基本是一个人弄这玩 很多东西并没系统的了解, 大学了以后才想着要好好拿本书去学)的学习JS的过程中发现的, 嘛 一直以为大家都知道了!

  2. aikor 说:

    嗯,学习了~~~谢谢分享

发表评论

(发广告、垃圾评论者请慎重,点击左边按钮可能会造成下半身永久性创伤)