解决ajax动态生成的数据无法获取html标签的属性值

ajax动态生成的数据如何获取html标签的属性值

这是我ajax动态生成的数据：

'<tr><td width="10%" align="center" class="uartilceid">'+data[i].artilceid+'</td><td width="60%" align="center"><a target="_blank" href="/article/'+data[i].artilceid+'">'+data[i].headline+'</a></td><td width="8%" align="center">'+data[i].readcount+'</td><td width="8%" align="center">'+data[i].replycount+'</td><td width="14%" align="center"><a href="#" class="'+data[i].artilceid+'" onclick="cancleCollection()">取消收藏</a></td>'

window.onload = $(function () {
         $.ajax({
            url: "/collection",
            type: "get",
            success: function (data) {
                for (var i = 0, len = data.length; i < len; i++) {
                    $("#coll").append('<tr><td width="10%" align="center" class="uartilceid">'+data[i].artilceid+'</td><td width="60%" align="center"><a target="_blank" href="/article/'+data[i].artilceid+'">'+data[i].headline+'</a></td><td width="8%" align="center">'+data[i].readcount+'</td><td width="8%" align="center">'+data[i].replycount+'</td><td width="14%" align="center"><a href="#" class="'+data[i].artilceid+'" οnclick="cancleCollection()">取消收藏</a></td>')
                }
            }
        })
    })

生成的数据列表：

<tbody id="coll">
     <tr>
	     <td width="10%" align="center" class="uartilceid">1</td>
	     <td width="60%" align="center">
	     	<a target="_blank" href="/article/1">漫谈：强哥在强哥学堂想对朋友们说的一些话</a>
	     </td>
	     <td width="8%" align="center">1714</td>
	     <td width="8%" align="center">39</td>
	     <td width="14%" align="center">
	     	<a href="#" class="1" onclick="cancleCollection()">取消收藏</a>
	     </td>
     </tr>
     <tr>
	     <td width="10%" align="center" class="uartilceid">2</td>
	     <td width="60%" align="center">
		     <a target="_blank" href="/article/2">漫谈：已经有蜗牛学院了，为什么还要创办强哥学堂？</a>
	     </td>
	     <td width="8%" align="center">2959</td>
	     <td width="8%" align="center">0</td>
	     <td width="14%" align="center">
		     <a href="#" class="2" onclick="cancleCollection()">取消收藏</a>
	     </td>
	  </tr>

获取class值的onclick="cancleCollection(this)"js代码：

 function cancleCollection() {
        var a = $(this).attr("class")
        console.log($(this).attr("class"))
        alert(a)
 }

目标：

当我点击取消收藏时onclick="cancleCollection(this)想要获取class属性的值class="'+data[i].artilceid+'"，但点击后获取的值却是undefined

原因：

因为这部分是新生成的元素，新生成的元素和一开始就加载的元素是不一样的。

解决办法

$(document).on('click','.canColl',function onoutStat() {
        var data = $(this).attr('id');
        alert(data)
      })