Failed to get row information, error cannot create property "guid" in row

Question

I am using jquery datatables. I got an error Cannot create property 'guid' on stringwhen I tried to get row data.

http://jsfiddle.net/rqx14xep

var employersTable = $('#employersTable').DataTable();

$('#add').click(function() {
  addRow($('.username').val(), $('.phone').val());
});

$('body').on('click', '#employersTable tr', retrieveRow(this));

function addRow(username, phone) {
  employersTable.row.add([
    '<td>' + username + '</td>',
    '<td>' + phone + '</td>',
  ]).draw();
}

function retrieveRow(e) {
  alert('fire')
  tr = e.target;

  row = employersTable.row(tr);

  detail_data = row.data();
  $("#result").empty().html(detail_data[0] + " " + detail_data[1])
}

Another weird thing is my retrieveRow fire on init function, why? I put the function in the click event.

Answer 1

The main problem is this line:

$('body').on('click', '#employersTable tr', retrieveRow(this));
                                            ^^^^^^^^^^^^^^^^^

It actually performs retrieveRow()right away. When you reference a function variable in an event handler on(), refer to it as a variable:

$('body').on('click', '#employersTable tr', retrieveRow);

---

You have another problem in retrieveRow():

tr = e.target;

e.target a <tr>, , <td>. #employersTable tr, this <tr>:

tr = $(this)

,

tr = $(e.target).closest('tr')

forked fiddle → http://jsfiddle.net/nkaq816f/