js绑定事件-（坑）

最新推荐文章于 2025-04-23 22:15:42 发布

西泊浪人

最新推荐文章于 2025-04-23 22:15:42 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：事件 click事件

本文链接：https://blog.youkuaiyun.com/westernRanger/article/details/46890861

前端专栏收录该内容

13 篇文章

订阅专栏

本文讨论了一个关于在JavaScript中使用事件绑定时遇到的问题，即同一个DOM元素被意外地绑定了两次click事件，导致在操作时出现意料之外的行为。通过分析代码并进行调试，作者最终找到了问题所在，并提供了修复方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天被自己绑定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就搞定。