如何用jQuery获取data属性值？PHP循环按钮取值遇undefined问题

你的问题出在内联onclick调用函数时，函数内部的this不指向点击的元素，而是指向全局的window对象，所以$(this).attr('data-id')自然拿不到正确的值。下面提供两种可行的解决方式：

方式一：修改内联事件，传递当前元素 #

直接在onclick里把当前元素作为参数传给函数：

修改后的PHP输出代码： #

echo "<td><a class='map-pop' data-id='".$employee_time['id']."' data-toggle='modal' data-target='#mapModal' onclick='viewmap(this);'><img src='assets/viewmap.png'></a></td>";

修改后的JS函数： #

function viewmap(el) {
    // 方式1：用attr获取data属性
    var ids = $(el).attr('data-id');
    // 方式2：用jQuery的data方法（更推荐，会自动转换数据类型）
    // var ids = $(el).data('id');
    alert('id is ' + ids);
}

方式二：使用jQuery事件委托（更优雅，推荐） #

放弃内联onclick，用jQuery的事件委托绑定点击事件，尤其适合循环生成的元素：

PHP代码保持不变（去掉onclick）： #

echo "<td><a class='map-pop' data-id='".$employee_time['id']."' data-toggle='modal' data-target='#mapModal'><img src='assets/viewmap.png'></a></td>";

替换为jQuery事件绑定： #

$(document).on('click', '.map-pop', function() {
    var ids = $(this).data('id');
    alert('id is ' + ids);
});

事件委托的优势在于，即使后续动态生成的.map-pop元素，也能自动绑定点击事件，不需要重复绑定。

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