can not get the dom element after appending rows of table

Question

I want to fetch the json data from serve and then loop the rows of table. the html code is like:

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

the jQuery part:

$.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>"
                    );
                });
            }
        });

I could get all the data from the remote side, but the key question is this part

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

I inspect this page and found, sth like

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

already exists in the dom.

but

1, the style class="mini ui black buttons" can not be applied. 2, when you try to click the "check" and want to trigger the somefunction(). it doesnt work.

so, why couldn't i get the dom element after appending the rows? OR, is there any other better way to loop rows after fetching the data?

thx

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

onclick attributes only work in the initial HTML, not in appended elements. See this question.

Instead, add the event handler using .click() or .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);
            });
        }

Or, if it's the same function for every such link, just add it using event delegation:

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

edited May 23 '17 at 12:20

Community

1
1

answered Aug 01 '14 at 14:16

Blazemonger

90,923
26
142
180

thanks for you answer, but do you know why doesn't the style class="mini ui black buttons" show? is it the problem related to the sequence problem? – L.G Aug 01 '14 at 14:52
and also another problem is, when i try $row.find('.mini.ui.black.buttons').on('click',somefunction); replace the somefunction to function(){alert('hello')}; it occured error "Uncaught TypeError: undefined is not a function " – L.G Aug 01 '14 at 15:06
The JS error is because I forgot to make `$row` a jQuery object -- my bad. Updated answer. Don't think I can help you with the first question. – Blazemonger Aug 01 '14 at 15:09
However, I just noticed that you're adding `id='detail_check'` in multiple places, which is a no-no -- IDs need to be unique. You can change it to `"id='detail_check_"+value.id+"'"` and that might work. – Blazemonger Aug 01 '14 at 15:10

can not get the dom element after appending rows of table

1 Answers1