js绑定事件-（坑）

昨天被自己绑定click事件坑了一下子，学浅乃危险之事。如果读书多了就不会犯这样的错误了。

这样一个下拉框，点击“我选1”会生成一条“hello world！！！”，点“继续添加”则会继续添加。如果点击”我选2“也会像之前一样，首先把之前的记录清除掉，再生成一条，可以继续添加，一次生成一条”hello world！！！“

代码如下：

var nodeArea = '<div class="moOrRanArea" style="border:#000 solid 1px;margin:10px 0;">\
                            hello world!!!\
                        </div>';
        $("#moOrRan").change(function(){
            if(this.value!=0){
                $(".externalArea .moOrRanArea").remove();
                $(".externalArea").show().append($(nodeArea));
                $("#addArea").bind("click",function(){
                    $(".externalArea").append($(nodeArea));
                })

            }else{
                $(".externalArea").hide();
                $(".externalArea .moOrRanArea").remove();
            }

        })

看起来没啥问题，但是实际运行是有问题的，从”我选1“切换到”他选二“，刚切换过去是这样的：

我点一次”继续添加“就成这样了：

点击一次，增加了两条！！！
我考虑了半天。。。然后打断点各种试，发现

$("#addArea").bind("click",function(){
                    $(".externalArea").append($(nodeArea));
                })

从”我选1“切换到”他选2“的时候，每点击一次继续添加，这段代码执行了两边。原来是”$(“#addArea”)“，这个dom元素添加了两次click事件。

$("#addArea").unbind("click").bind("click",function(){...})

首先绑定unbind就搞定。