点击Glyphicon时无法获取正确data值，求正确的console.log实现方法

Hey there! Let's break down why you're getting undefined for the data attribute even though it shows up correctly in dev tools. The core issue is how you're binding the click event and accessing the element in your editTask function.

问题根源 #

1. 缺少点击元素的上下文传递：你的onclick=editTask()调用没有把当前点击的元素传给函数，所以editTask根本不知道要从哪个元素上读取data属性。
2. data属性命名不规范：虽然你设置了data='" + taskid + "'，但HTML5自定义data属性应该遵循data-*格式（比如data-taskid），这不仅符合规范，也让取值逻辑更清晰。
3. 代码片段语法不完整：你提供的代码末尾有未闭合的部分（<span onclick=")），这可能导致DOM渲染异常，间接影响属性读取。

修正方案 #

第一步：修正HTML结构和事件绑定

把你的代码片段改成这样，确保传递点击元素的上下文，并且使用规范的data属性：

// 补全闭合标签，给onclick传递this，data属性改为符合规范的data-taskid
newrow.append($("<td><span onclick='editTask(this)'><i class='fas fa-edit glypiconSpace' data-taskid='" + taskid + "'></i></span></td>"));

第二步：修改editTask函数获取属性值

在editTask函数里，通过传入的元素找到对应的<i>标签，再读取它的data属性：

function editTask(clickedSpan) {
    // 原生JS方式获取data-taskid的值
    const taskId = clickedSpan.querySelector('i').dataset.taskid;
    // 如果你用jQuery，也可以这么写：
    // const taskId = $(clickedSpan).find('i').data('taskid');
    
    console.log("Edit", taskId);
}

更简洁的写法（可选） #

其实你可以直接把点击事件绑定到<i>标签上，省去外层<span>的嵌套，代码更简洁：

newrow.append($("<td><i onclick='editTask(this)' class='fas fa-edit glypiconSpace' data-taskid='" + taskid + "'></i></td>"));

对应的函数可以简化为：

function editTask(clickedIcon) {
    const taskId = clickedIcon.dataset.taskid;
    // jQuery版本：const taskId = $(clickedIcon).data('taskid');
    console.log("Edit", taskId);
}

额外优化建议（最佳实践） #

内联onclick虽然简单，但在复杂项目中更推荐用事件委托绑定事件，比如：

// 假设你的表格有一个id叫taskTable
$('#taskTable').on('click', '.fa-edit', function() {
    const taskId = $(this).data('taskid');
    console.log("Edit", taskId);
});

这样就不需要在HTML里写内联onclick了，代码更易维护，也彻底避免了上下文丢失的问题。

内容的提问来源于stack exchange，提问作者Gabe Perry