Question

我想从服务器获取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，无法应用样式类=“迷你ui黑色按钮”。 2，当你尝试点击“检查”并想要触发somefunction（）时。它不起作用。

所以，为什么我不能在追加行后得到dom元素？或者，有没有其他更好的方法来获取数据后循环行？

THX

Answer 1

onclick属性仅适用于初始HTML，而不适用于附加元素。请参阅this question。

而是使用.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);
            });
        }

或者，如果每个此类链接的功能相同，只需使用event delegation添加：

$('#topics_list_table').on('click', '.mini.ui.black.buttons', somefunction);

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

1 个答案: