讨论下jquery中的重复添加和事件绑定(转)

今天花了一天时间,终于把网站从D3JS+JQUERY杂交改写成了纯jquery。D3JS确实不能和jquery比,中文资料没有,也没什么人讨论,功能上也有一些缺陷,更别说jquery和ajax这么紧密的关系了。
当然扔掉D3JS是必然的,但是D3JS的使用,也是有帮助。
在网站的制作,或者说是各种函数的使用中,我发现有两个问题,是javascript这种脚本语言容易让人迷惑的。首先就是重复添加的问题:在javascript中,for循环可以用来迭代,看下如下的代码
for(var i=0; i<10 ;i++) {
 $("div#item").append(content);
}
上面这个代码很简单,就是选中所有的div#item,并在里面添加多个content元素,但事实上结果是只有添加了一个content元素,这样的原因是在这个for循环中,每次都会判定被选中的元素是否发生状态的改变,如果状态不变,则语句不执行。如果用DOM的node().appendChild也是一个效果。显然如果想要在item里面重复添加相同的物件,要采用的是clone的方式,即
for(var i=0; i<10 ;i++) {
 $("div#item").append(content.clone()); 
}
另外一个问题就是事件绑定问题。如下语句中,只要调用了on事件,则这个on事件就保存了起来,不管什么时候调用它,它其中的变量time都是当初传入的那个值。如果希望on事件能跟着time的变化和变化,那么就必须不断创建这个On事件。但问题是,on事件可以看成是一个实例化对象,每调用一次,就会生成一个,如果反复调用,后果就是积累的on对象越来越多。
 $("font#b_year").on("click",function(){ $("div#buttom_b").children().remove(); $("div#item").remove(); drawButton(time,12); // $("font#b_year").text(""); $("font#b_month").text(""); $("font#b_shuoming").text("请按以下按钮选择要查看的月份"); });
那么如何既能更新time,又不让on的实例反复增加呢?就必须要用unbind这个函数。jquery中的unbind函数用于删除该项之前绑定的事件对象
$("font#b_year").unbind(); 

$("font#b_year").on("click",function(){ $("div#buttom_b").children().remove(); $("div#item").remove(); drawButton(time,12); // $("font#b_year").text(""); $("font#b_month").text(""); $("font#b_shuoming").text("请按以下按钮选择要查看的月份"); });
在调用on之前,unbind它之前的事件,这样就不会发生前面提到的问题了
转自:http://blog.sina.com.cn/s/blog_7cfb366d0101er75.html

你可能感兴趣的:(JavaScript,jquery,事件,on,重复)