javascript - 获取行数据失败，错误 Cannot create property 'guid' on string

Question

我正在使用 jquery 数据表。当我尝试检索行数据时，出现了 Cannot create property 'guid' on string 错误。

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])
}

更奇怪的是我的函数 retrieveRow 在初始化时触发，为什么？我将函数放在点击事件中。

Answer 1

你的主要问题是这一行:

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

这实际上执行 retrieveRow()马上。当您在 on() 中引用函数变量时事件处理程序，将其作为变量引用:

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

---

您在 retrieveRow() 中遇到了不同的问题:

tr = e.target;

e.target不一定是 <tr> , 它很可能是 <td>你点击了。事件处理程序的目标是 #employersTable tr所以this包含对 <tr> 的引用:

tr = $(this)

是正确的，更安全的是

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

fork fiddle -> http://jsfiddle.net/nkaq816f/