how to get a row index in dynamic table via jQuery

Question

I use jquery to dynamic create table content in page, how can I get the row number index of this dynamic table? In the following code, when I click the "show more" link, I use index function in following code, but it not work. How to solve this issue? Thanks.

 $.getJSON(JsonURL,
        function(data){

            $.each(data, function(index, item){
                var obj = item;
                books.push(book);
            });
            for (var i = 0; i<obj.length; i++) {
                var tr=$('<tr></tr>'); 
                $('<td>'+ obj[i].name +'</td>').appendTo(tr);
                $('<td>'+ obj[i].category +'</td>').appendTo(tr);
                $('<td><a class=\'showMore\' href=#>'+ 'show more' +'</a></td>').appendTo(tr);
                tr.appendTo('#tableBody');
            };
    });
    $('a .showMore').on('click', function(event) {
        var rowindex = $(this).parent().parent().children().index($(this).parent);
        console.debug('rowindex', rowindex);
    });

Answer 1

you should use event delegation for that

$(document).on('click',".showMore", function(event) {
    var rowindex = $(this).parents("tr").index();
    console.debug('rowindex', rowindex);
});

Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.