JavaScript 事件委托點擊第一次執(zhí)行1，點擊第二次執(zhí)行1和2？

布局是 ul>li>i 然后動態(tài)添加的li 用了事件委托的方法
現(xiàn)在問題是，每次刷新頁面，點擊的第一下都執(zhí)行到 console.log('1')
在點擊第二下時候，才會執(zhí)行 console.log('1') console.log('222222222222')
動態(tài)生成的元素，也是第一次點擊先 console.log('1')
第二次點擊 console.log('1') console.log('222222222222')

要怎樣，一直都是 console.log('1') console.log('222222222222')

            let aul = document.querySelector("#commentList")
            


            aul.addEventListener('click',function(ev){
                var target = ev.target;
                while(target !== aul ){
                    if(target.tagName.toLowerCase() == 'li'){
                        aa()
                        console.log('1')
                        break;
                    }
                    target = target.parentNode;
                }
            })
 
            function aa(){
 
                let zanli = document.getElementsByTagName("li")

                for (var i = zanli.length - 1; i >= 0; i--) {
                    let num = i
                    zanli[i].addEventListener("click",function(ev){
                        console.log('222222222222')
                        zaning(num)
                    })
 
                }
            }
 
            function zaning(num){
                let zanli = document.getElementsByTagName("li")
                for (let i = zanli.length - 1; i >= 0; i--) {
 
                    let findi = zanli[i].querySelector("i")
                    
                    if (i==num) {
                        if(findi.className == 'pt_praise active') {
                            return false;
                        }
                        findi.classList.add("active")
                        var numm = findi.innerHTML
                        findi.innerHTML = Number(numm)+1;
                    }
                }
            }

回答

編輯回答

敢試

看下事件委托呢

2017年12月29日 07:31

編輯回答

有點壞

    <div class="page-iscroll" id="page-iscroll">
        <div class="wrapper">
            <div class="chat_mod">
                <!-- <div class="not_mod">快來搶個沙發(fā)...</div> -->
                <ul id="commentList" class="we_chat comment_list">
                    <li>
                        <div class="img"><img src="images/video_img/1.jpg" alt=""></div>
                        <div class="con">
                            <span>董事長</span>
                            <span><strong>05-23 14:22</strong><i class="pt_praise">6</i></span>
                            <span>德國法國意大利巴西克羅地亞朝鮮俄羅斯阿根廷西班牙葡萄牙冰島英國東道主出局等湊個數(shù)</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/video_img/1.jpg" alt=""></div>
                        <div class="con">
                            <span>董事長</span>
                            <span><strong>05-23 14:22</strong><i class="pt_praise">0</i></span>
                            <span>德國法國意大利巴西克羅地亞朝鮮俄羅斯阿根廷西班牙葡萄牙冰島英國東道主出局等湊個數(shù)</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
 
</section>
 
<footer class="appointment_footer">
    <div class="item"><input class="form_control mywords" id="mywords" type="text" maxlength="140"  value="" placeholder="我來說幾句..."></div>
    <div class="item"><a href="javascript:void(0);" class="btn sendBt" id="sendBtn"onclick="sendMessage()">發(fā)送</a></div>
    <div class="item"><i class="btn_favs_icon btnfavs"></i></div>
    <div class="item"><i class="btn_share_icon btnshare"></i></div>
</footer>
<script>
  

        // 聊天 滾動 必用參數(shù)
        // myScroll.scrollTo(0, 0); 頂部位置
        // myScroll.refresh(); 重新刷新
        // myScrollChat.scrollToElement(  
        //     設(shè)置固定位置
        //     document.querySelector('#chatArea li:last-child'), 500, null, true
        // ); 


        let myScrollChat;
        let commentList=document.getElementById("commentList");
        let ptPraise = document.querySelector(".pt_praise");
        let aul = document.querySelector("#commentList");
        let zanli = document.getElementsByTagName("li");

        function loaded() {
            myScrollChat = new IScroll('#page-iscroll', {mouseWheel: true, tap: true,click:true});  
        }

        chatWindowHeight();
        loaded();

        window.addEventListener('resize', function () {
            chatWindowHeight();
            loaded();
        }, false);

 
        aa();

        function aa(){
            for (var i = zanli.length - 1; i >= 0; i--) {
                let num = i
                zanli[i].addEventListener("click",function(ev){
                    var target = ev.target;
                    if(target.tagName.toLowerCase() == 'i'){
                        zaning(num)
                    }
                })
            }
        }

        function zaning(num){
            for (let i = zanli.length - 1; i >= 0; i--) {
                let findi = zanli[i].querySelector("i")
                if (i==num) {
                    if(findi.className == 'pt_praise active') {
                        return false;
                    }
                    findi.classList.add("active")
                    var numm = findi.innerHTML
                    findi.innerHTML = Number(numm)+1;
                }
            }
        }    
        
        function addMessage(message){
            var strVar = "";
                strVar += "<li>";
                strVar += "<div class=\"img\">";
                strVar += "    <img src=\"images/video_img/1.jpg\" alt=\"\">";
                strVar += "<\/div>";
                strVar += "<div class=\"con\">";
                strVar += "    <span>天天向上<\/span>";
                strVar += "    <span><strong>05-23 14:22<\/strong><i class=\"pt_praise\">0<\/i><\/span>";
                strVar += "    <span>";
                strVar += message;
                strVar += "    <\/span>";
                strVar += "<\/div>";
                strVar += "<\/li>";

            if (message === '') {
                layer.msg('請輸入文字...');
            } else {
                commentList.innerHTML += strVar;
                aa();
                
                //每一次發(fā)言必須要有的函數(shù)
                setTimeout(function () {
                    myScrollChat.refresh();  
                    myScrollChat.scrollToElement(
                        document.querySelector('#commentList li:last-child'), 500, null, true
                    ); 
                }, 0);

            }
            document.getElementById("mywords").value = '';
        }

        function sendMessage(){
            var msg=document.getElementById("mywords").value;
            addMessage(msg); 
        }

 

</script>

2017年8月23日 19:52