前端：事件动态绑定原理和重复绑定问题

最新推荐文章于 2024-05-14 10:49:38 发布

weixin_33712987

最新推荐文章于 2024-05-14 10:49:38 发布

阅读量214

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/xuejianbest/p/10284972.html

版权

以下代码默认引入了jQuery。

如下：

<script type="text/javascript">
    $(function(){
        $("input").click(function(){
            $("#addbtn").append("<input value='bbb' type='button'>");
            
            $("#addbtn").on("click", "input", function(){
                console.log("bbb");
            });
        });
    });
</script>

<body>
    <input value="aaa" type="button">
    <div id="addbtn"></div>
</body>

每次点击aaa按钮会生成一个bbb按钮。若点击aaa两次，生成了2个bbb按钮，则每次点击bbb按钮一下会打印2次"bbb"。

若js改成：

$(function(){
    $("input").click(function(){
        $("#addbtn").append("<input value='bbb' type='button'>");
        
        $("#addbtn input").on("click", function(){
            console.log("bbb");
        });
    });
});

或者

$("input").click(function(){
    $("#addbtn").append("<input value='bbb' type='button'>");
        
    $("#addbtn input").click(function(){
        console.log("bbb");
    });
});

每次点击aaa按钮会生成一个bbb按钮，若生成2个bbb按钮，则每次点击第一个bbb按钮一下会打印2次"bbb"，每次点击第二个bbb按钮一下会打印1次"bbb"。以上两种方式效果一样。

若js改成：
把bbb按钮click事件函数绑定代码放到aaa按钮click点击事件函数外面。

$(function(){
    $("input").click(function(){
        $("#addbtn").append("<input value='bbb' type='button'>");
    });
    
    $("#addbtn").on("click", "input", function(){
        console.log("bbb");
    });
});

每次点击aaa按钮会生成一个bbb按钮，无论生成几个bbb按钮，每次点击任意一个bbb按钮都只会打印1次"bbb"。

再看以下js：

$(function(){
    $("input").click(function(){
        $("#addbtn").append("<input value='bbb' type='button'>");
        
        $("#addbtn").unbind("click");//或$("#addbtn").off("click");
        $("#addbtn").on("click", "input", function(){
            console.log("bbb");
        });
    });
});

每次点击aaa按钮会生成一个bbb按钮，无论生成几个bbb按钮，每次点击任意一个bbb按钮都只会打印1次"bbb"。

说明$("#addbtn").on("click", "input", function(){});这中绑定事件方式实际是把事件绑定到$("#addbtn")元素上，然后往下查找子元素里为$("input")的元素，以此来实现动态生成元素的事件绑定。

转载于:https://www.cnblogs.com/xuejianbest/p/10284972.html

weixin_33712987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：事件动态绑定原理和重复绑定问题

以下代码默认引入了jQuery。如下：<script type="text/javascript"> $(function(){ $("input").click(function(){ $("#addbtn").append("<input value='bbb' type='b...
复制链接

扫一扫