问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JavaScript addEventListener 问题

头像
清风
    14413055

    动态生成了一个dom元素，然后给这个dom元素动态添加一个子元素A，添加之后，给A添加了监听事件，第一次点击有效果，但是点击之后执行了隐藏动作，然后再显示之后，再次点击，这个监听事件不起作用了，我虽然是动态添加的元素，但是第二次并没有移除而只是隐藏了，再次显示之后为何就不能用了呢？

    详细代码：

    <div class="box"></div>
    然后通过方法，在box里面添加一个元素box1,并给box1添加一个监听点击事件
<div class="box">
    <div class="box1"></div>
</div>

然后点击box1，在box里面再添加一个元素box2,并给box2添加一个监听事件，同时让box1隐藏，当点击box2让box2本身隐藏，同时显示box1之后，再次点击box1，box1上面的监听事件失效了
<div class="box">
    <div class="box1"></div>
     <div class="box2"></div>
</div>
    javascript
    阅读 1.7k
    1 个回答
    得票最新
    头像
    babe
      963129

      按照你的意思写的代码:jquery的话替换成你自己的

      <!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                border: 1px solid #ccc;
            }

            .box1{
                width: 10px;
                height: 10px;
                background: #600;
            }

            .box2{
                width: 10px;
                height: 10px;
                background: #060;
            }
        </style>
    </head>
    <script src="./js/jquery-3.3.1.js"></script>
    <body>
       <div class="box"></div>

       <script>
           $(function(){
                $('.box').append(`
                    <div class="box1"></div>
                `);

                $('.box1').click(function(event){

                    if($('.box2').length == 0){
                        $('.box').append(`
                            <div class="box2"></div>
                        `);

                        $('.box2').click(function(event){
                            $('.box2').hide();
                            $('.box1').show();
                        });
                    }
                    
                    $('.box1').hide();
                    $('.box2').show();
                });


           });
       </script>
    </body>

</html>

      一般不会有问题

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题