JavaScript addEventListener 問題

動態(tài)生成了一個dom元素，然后給這個dom元素動態(tài)添加一個子元素A，添加之后，給A添加了監(jiān)聽事件，第一次點擊有效果，但是點擊之后執(zhí)行了隱藏動作，然后再顯示之后，再次點擊，這個監(jiān)聽事件不起作用了，我雖然是動態(tài)添加的元素，但是第二次并沒有移除而只是隱藏了，再次顯示之后為何就不能用了呢？

詳細代碼：

<div class="box"></div>

然后通過方法，在box里面添加一個元素box1,并給box1添加一個監(jiān)聽點擊事件
<div class="box">
    <div class="box1"></div>
</div>

然后點擊box1，在box里面再添加一個元素box2,并給box2添加一個監(jiān)聽事件，同時讓box1隱藏，當點擊box2讓box2本身隱藏，同時顯示box1之后，再次點擊box1，box1上面的監(jiān)聽事件失效了
<div class="box">
    <div class="box1"></div>
     <div class="box2"></div>
</div>

回答

編輯回答

尋仙

按照你的意思寫的代碼: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>

一般不會有問題

2018年2月11日 03:26