解析JS绑定事件重复触发问题 第一步

一、什么问题

当前端开发过程中,经常用到事件,随着业务代码这一块的复杂化,在事件和多次注册和调用时,如果处理不好就会出现同一事件触发多次的问题。今天我们就聊一聊这个问题

二、事例

下面这段代码是一个简单的例子,页面上一有一个安钮。当点击’安钮‘时创建一个button为 test button代码插入area中。接着点击该button,console.log一个东西。如果下代码:

html结构:

<body>

<div id="tableBox" class="add">安钮</div>

<div class="area"></div>

</body>

css:

#tableBox{

width:100px;

height:30px;

background:red;

border:1px solid red;

text-align:center;

line-height:30px;

border-radius:5px;

}

.area{

width:100px;

height:100px;

margin-top:40px;

border:2px;

border:1px solid #000;

}

js代码:

$(function(){

    $(".add").on('click',function(eve){

      $(".area").append("<button class='test-btn'>test button</button>");      

      $(".area").on('click','.test-btn',function(event){

        console.log("test button .....");   

       

      });

    });

});

运行此段代码结果是:当第一次点击’安钮‘时,成功创建了一个button,再点击这个button执行打印出test button...,此时看一切都是那么正常,可是接着再点击第二次’安钮‘时,此时创建出来第二个button时,再点击刚才第一次创建出来的button,打印出来了3次,也就是说点击一次。执行了二次代码。以此类推。第三次时,就执行了三次代码。。。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑白安全

缓冲区溢出说明:基础知识

软件中最常见和最古老的安全漏洞之一是缓冲区溢出漏洞。从操作系统到客户端/服务器应用程序和桌面软件的各种软件都会出现缓冲区溢出漏洞。这通常是由于编程错误以及应用程...

16510
来自专栏开源优测

[接口测试_B] 02 Pytest的简单示例

Pytest是什么 Pytest是Python的一个测试工具,可以用于所有类型和级别的软件测试。Pytest是一个可以自动查找到你编写的用例并运行后输出结果的测...

33840
来自专栏积累沉淀

linux目录结构介绍

linux目录结构介绍 ? "/" :Linux文件系统的入口.也是最高一级的目录. "/bin":基本系统所需要的命令,功能和"/usr/bin...

22690
来自专栏小樱的经验随笔

LINUX中常用操作命令

LINUX中常用操作命令 Linux简介及Ubuntu安装 常见指令 系统管理命令 打包压缩相关命令 关机/重启机器 Linux...

43960
来自专栏北京马哥教育

进程和线程关系及区别

一、定义 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位。 线程是进程的一个实体,是CPU调度...

29770
来自专栏电光石火

使用Maven创建web项目

​使用eclipse插件创建一个web project

24780
来自专栏地方网络工作室的专栏

Shell 命令行,实现对若干网站状态批量查询是否正常的脚本

Shell 命令行,实现对若干网站状态批量查询是否正常的脚本 如果你有比较多的网站,这些网站的运行状态是否正常则是一件需要关心的事情。但是逐一打开检查那简直是一...

30980
来自专栏chenssy

【死磕Sharding-jdbc】---准备工作

sharding-jdbc源码主要有以下几个模块:sharding-jdbc-config-parent、sharding-jdbc-core、sharding...

11810
来自专栏Rgc

redis中key过期事件

刚到新公司一个月左右,有个新需求,想做定时任务,比如在用户注册时间的3天后推送用户一条消息。

54510
来自专栏电光石火

使用Maven创建web项目

使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 ? 我们勾选上Create a simple ...

416100

扫码关注云+社区

领取腾讯云代金券