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

Potato-OvO

已于 2022-04-04 15:11:18 修改

阅读量885

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： ajax html5 jquery

于 2022-04-04 15:10:45 首次发布

本文链接：https://blog.csdn.net/w5206666/article/details/123953779

前端专栏收录该内容

9 篇文章

订阅专栏

本文讨论了如何在JavaScript中使用Ajax动态生成HTML数据，并解释了由于这些元素是在页面加载后创建的，因此需要使用事件委托来正确获取它们的属性值。通过示例代码展示了如何为动态生成的`取消收藏`链接绑定事件，以及在点击时获取对应的class属性值。当点击事件触发时，发现原本预期获取的class值实际上是undefined，原因是新生成的元素没有正确绑定事件。解决方案是使用`$(document).on('click', '.canColl', function onoutStat(){...}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
      })