javaScript学习笔记---在click中绑定click事件应该这么使用

最新推荐文章于 2023-01-02 11:28:49 发布

xiaoa~

最新推荐文章于 2023-01-02 11:28:49 发布

阅读量243

点赞数

分类专栏： javascript学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79362633

版权

javascript学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .hidden{
            display:none;

    </style>
</head>
<body>
   <input id="a" type="button" value="a"/>
   <input id="b" type="button" value="b" />
   <div id='i1' class="hidden" style="margin:0 auto;width:300px;height:200px;background-color:grey">
       <input id='i2' type="button" value="确认"  />
       <input type="button" value="取消" οnclick="Cancel()"/>
   </div>
<script src="jquery-1.12.4.js"></script>
    <script>
        $('#a').on('click',function(){
            $('#i1').removeClass('hidden');
            $('#i2').off().on('click',function(){
                console.log('a');
            })
        })

        $('#b').on('click',function(){
            $('#i1').removeClass('hidden');
            $('#i2').off().on('click',function(){
                console.log('b');
            })
        })

//       下面这种方式不行，如果你点击了取消，下次再点击b，再点确认就会输出2次b。而且这样，即使a中写了off(),但是如果点击a
        //在点击取消，再点击b，确认，会输出a和b，所以要a ， b 同时写off
        $('#b').on('click',function() {
            $('#i1').removeClass('hidden');
            $('#i2').click(function () {
                console.log('b');
            })
        })

        function Cancel(){
            $('#i1').addClass('hidden');
        }

    </script>
</body>
</html>

xiaoa~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript学习笔记---在click中绑定click事件应该这么使用

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .hidden{ disp
复制链接

扫一扫