对于js循环数据添加事件的方法

今天闲着没事突然间想到项目中经常遇到遍历数据，然后给每条数据添加点击事件
看到大家都是bind方法来事件委托一下
但是我觉得下面这个方法更简便一点吧

方法1

var array = [
		{name: 'zhangsan1',age: 18},
        {name: 'zhangsan2',age: 19},
    ]
for (var i = 0; i < array.length; i++) {
        $('.test').append(`
            <div class="Tclick" age='${array[i].age}'  οnclick='getAge(this)' >姓名:${array[i].name}</div>
        `)
    }

    function getAge(that) {
        let age = $(that).attr('age');
        alert(age)

    }

这个还是很通俗易懂的，在循环的同时 给标签加一个onclick事件。

方法2 其实是上面一个方法的扩展吧 错误

for (var i = 0; i < array.length; i++) {
        $('.test').append(`
            <div class="Tclick" age = '${array[i].age}'    >姓名:${array[i].name}</div>
        `)

    }
    $('.Tclick').on('click',function (param) { 
        console.log($(this).attr('age'))
     })

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品，使用 on() 方法添加的事件处理程序适用于当前及未来的元素

但是用on方法 假如是数据渲染完了之后再通过按钮创建新的 绑定不上方法。这是我一开始用的时候存在一个误区，而要是打算创建新的数据绑定上方法，要使用下面的方法

正确 on方法

for (var i = 0; i < array.length; i++) {
        $('.test').append(`
            <div class="Tclick" age = '${array[i].age}'    >姓名:${array[i].name}</div>
        `)

    }
    $('.test').on('click','.Tclick',function (param) { 
        console.log($(this).attr('age'))
     })

只是把on这边的方法改了改,$(’.test)是动态元素的父元素的类名，’.Tclick’是动态添加的元素的类名