在获取ID时获取NaN而不是实际数字

Getting NaN instead in actual number when trying to fetch ID from

本文关键字：获取 数字 ID NaN      更新时间：2023-09-26

我有一个表记录，每一行有唯一的ID。我试图获取这个ID，所以我可以使用它来更新这些记录，但我不能这样做，因为我从数据属性中得到的都是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);
  });
});

有两个原因:

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元素的共同父元素。然后，它将在具有data-i-user-id属性的span元素tr的子元素中搜索。

完整的正确语句如下:

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