Question

我在每行都有一个具有唯一ID的表记录。我正在尝试获取此ID，因此我可以使用它来更新这些记录，但我无法这样做，因为我从data属性得到的只是NaN，而不是实际的ID。

在下面的代码中，我放置了我尝试获取id的数据属性。

for( var i = 0; i < aUsers.length; i++ ){
  $("#lblUsers").append('<tr><th scope="row">'+aUsers[i].id+"<button class='btn btn-success' id ='editBtn' data-toggle='modal' data-target='#editModal' contenteditable='false'>Edit</button>"+'</th><td>'+aUsers[i].username+'</td><td>'+aUsers[i].firstName+'</td><td>'+aUsers[i].lastName+'</td><td>'+aUsers[i].email+'</td><td>'+"<span data-i-user-id='"+aUsers[i].id+"'</span><input type='checkbox' id='chk_"+i+"'"+'</td></tr>');
}

以下是我尝试这样做的方法：

$(document).ready(function() {
  $("#editBtn").on("click", function() {
    var iUserId = parseInt($(this).closest("span").attr('data-i-user-id'));
    console.log(iUserId);
  });
});

Answer 1

有两个原因：

1。格式错误的HTML

您没有关闭span代码：

<span data-i-user-id='"+aUsers[i].id+"'</span>

应该是：

<span data-i-user-id='"+aUsers[i].id+"'></span>

请注意，下一个元素也会重复该问题：

<input type='checkbox' id='chk_"+i+"'"+'</td>

我建议您通过可用的DOM（或等效的jQuery）方法创建节点，而不是提供长HTML字符串，这通常会导致此类问题。

2。找到目标元素

的选择器错误

editBtn点击处理程序中的此选择器与任何元素都不匹配：

$(this).closest("span")

这是因为closest只查看按钮的父项，但是预期的span元素更像是按钮的远程侄子。

而是写下这个：

$(this).closest("tr").find("span[data-i-user-id]")

这将找到父tr元素，它是按钮和目标span元素的共同父元素。然后，它将在tr元素的子元素中搜索具有span属性的data-i-user-id元素。

完整正确的陈述如下：

var iUserId = parseInt($(this).closest("tr").find("span[data-i-user-id]").attr('data-i-user-id'));

尝试从中获取ID时，将NaN改为实际数字

1 个答案:

1。格式错误的HTML

2。找到目标元素