JavaScript addEventListener 問(wèn)題

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

詳細(xì)代碼：

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

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

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

回答

編輯回答

尋仙

按照你的意思寫(xiě)的代碼:jquery的話(huà)替換成你自己的

<!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>

一般不會(huì)有問(wèn)題

2018年2月11日 03:26