在追加表的行之后无法获得dom元素

can not get the dom element after appending rows of table

本文关键字：dom 元素 之后 追加      更新时间：2023-09-26

我想从服务器获取json数据，然后循环表的行。HTML代码如下:

<table id="topics_list_table">
  <thead>
    <tr><th>Topic Title</th>
    <th>Author Name</th>
    <th>Likes</th>
    <th>Created Time</th>
    <th>Actions</th>
  </tr></thead>
  <tbody>
  </tbody>
</table>
jQuery部分: 
$.ajax({
            url: some url here,
            type:'GET',
            success:function(res){
                $.each(res, function(index, value){
                    $('#topics_list_table > tbody:last').
                    append(
                        "<tr>" +
                        "<td>" + value.title + "</td>"+
                        "<td>" + value.author_name + "</td>"+
                        "<td>" + value.likes + "</td>"+
                        "<td>" + value.created + "</td>"+
                        "<td>" +
                        "<a href='/components/topics/" + value.id + "' class='mini ui black buttons' id='detail_check'>check</a>"+
                        "</td>"+
                        "</tr>"
                    );
                });
            }
        });

我可以从远程端获得所有数据，但关键问题是这部分

<a href='/components/topics/" + value.id + "' class='mini ui black buttons' onclick='somefunction()'>check</a>

我检查了这一页，发现了类似

的内容。
<a href="/components/topics/53cf67fad0c0f7fdda3ef8d5" class="mini ui black buttons"  onclick='somefunction()'>check</a>

在dom中已经存在。

,

1、样式class="mini UI黑色按钮"不能应用。2、当您尝试点击"check"并想要触发somefunction()时。

那么，为什么我不能得到dom元素后追加行?或者，是否有其他更好的方法来获取数据后循环行?

thx

onclick属性只在初始HTML中起作用，在附加元素中不起作用。请看这个问题

相反，使用.click()或.on('click')添加事件处理程序:

       success:function(res){
            $.each(res, function(index, value){
                var $row = $("<tr>" +
                    "<td>" + value.title + "</td>"+
                    "<td>" + value.author_name + "</td>"+
                    "<td>" + value.likes + "</td>"+
                    "<td>" + value.created + "</td>"+
                    "<td>" +
                    "<a href='/components/topics/" + value.id + "' class='mini ui black buttons' id='detail_check'>check</a>"+
                    "</td>"+
                    "</tr>");
                $row.find('.mini.ui.black.buttons').on('click',somefunction);
                $('#topics_list_table > tbody:last').
                append($row);
            });
        }

或者，如果每个这样的链接都是相同的函数，只需使用事件委托添加它:

$('#topics_list_table').on('click', '.mini.ui.black.buttons', somefunction);
相关文章：