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

看下事件委托呢