控制台日志记录时记录数据值

Question

嘿大家快问我的语法是对的，只是想知道这是从这个表行记录数据值的正确方法。当我点击glypicon时，我得到“编辑”的控制台日志，但id未定义。当我在浏览器中检查glypicon时，它具有正确的数据值。我只是在点击它时试图控制日志。

newrow.append($("<td><span onclick=editTask() i class='fas fa-edit glypiconSpace' data='" + taskid + "'></i></span><span onclick=deleteTask() i class='fas fa-trash-alt glypiconSpace2' data='" + taskid + "'></i></span></td>"))

function editTask() {
    console.log("edit")
    var id = ($(this).attr("data"));
    console.log(id)
}

Answer 1

你有2个错误：

1. 你将onclick添加到span但data被添加到i。
2. 你在this中使用了editTask，但this毫无意义，因为它没有任何元素。 （more information）

你需要以正确的方式追加和添加监听器，如下所示：

HTML

<table>
  <tr id="newRow"></tr>
</table>

JS

var taskid = "test";
var editSpan = $("<span> </span>");
var editIcon = $("<i class='fa fa-edit' data='" + taskid + "'></i>");

editIcon.click(function() {
  console.log("edit");
  var id = ($(this).attr("data"));
  console.log(id);
});

var yourTd = $("<td>");
$(yourTd).append(editSpan);
$(editSpan).append(editIcon);
$('#newRow').append(yourTd);

Online Demo (jsFiddle)