JavaScript 事件委托点击第一次执行1，点击第二次执行1和2？

Question

布局是 ul>li>i 然后动态添加的li 用了 事件委托的方法
现在问题是，每次刷新页面，点击的第一下 都执行到 console.log('1')
在点击第二下时候，才会执行 console.log('1') console.log('222222222222')
动态生成的元素，也是第一次点击先 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;
                    }
                }
            }    

Answer 1

    <div class="page-iscroll" id="page-iscroll">
        <div class="wrapper">
            <div class="chat_mod">
                <!-- <div class="not_mod">快来抢个沙发...</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>德国法国意大利巴西克罗地亚朝鲜俄罗斯阿根廷西班牙葡萄牙冰岛英国东道主出局等凑个数</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>德国法国意大利巴西克罗地亚朝鲜俄罗斯阿根廷西班牙葡萄牙冰岛英国东道主出局等凑个数</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()">发送</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>
  

        // 聊天 滚动 必用参数
        // myScroll.scrollTo(0, 0); 顶部位置
        // myScroll.refresh(); 重新刷新
        // myScrollChat.scrollToElement(  
        //     设置固定位置
        //     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();
                
                //每一次发言必须要有的函数
                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>

Answer 2

看下事件委托呢