jquery点击事件重复/叠加

最新推荐文章于 2024-07-26 20:46:33 发布

谭光志

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量2.2k

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/q411020382/article/details/56681049

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原生JS添加点击事件无论添加多少次点击的时候都只会触发一次

而用jquery添加绑定事件添加多少次点击的时候就触发多少次如果想解决这个问题就在点击函数里先用 $(对象).off("click") 取消上一次的点击事件

下面是代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <button id="add">点击增加绑定事件</button>
    <button id="trigger">点我触发绑定事件</button>
<script src="jquery-3.1.1.min.js"></script>
<script>
    var $add = $("#add"),
        $trigger = $("#trigger"),
        num = 0;
    $add.click(function() {
        $trigger.click(function() {
            num++;
            alert("第" + num + "次");
        });
    });    
</script>
</body>
</html>

jquery代码源文件请自行下载

如上所示生成的页面如果点击增加绑定事件3次然后点触发就会连弹3次窗

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <button id="add">点击增加绑定事件</button>
    <button id="trigger">点我触发绑定事件</button>
<script>
    var add = document.getElementById("add"),
        trigger = document.getElementById("trigger"),
        num = 0;
    add.onclick = function() {
        trigger.onclick = function() {
            num++;
            alert("第" + num + "次");
        }
    } 
</script>
</body>
</html>

而用原生代码写的增加点击事件则无论添加多少次触发的时候都只会触发一次弹窗

谭光志

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery点击事件重复/叠加

原生JS添加点击事件无论添加多少次点击的时候都只会触发一次而用jquery添加绑定事件添加多少次点击的时候就触发多少次如果想解决这个问题就在点击函数里先用 $(对象).off("click") 取消上一次的点击事件下面是代码展示 test 点击增加绑定事件点我触发绑定事件 var $add = $("#add"),
复制链接

扫一扫

专栏目录