讨论下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