无法通过jQuery DOM获取data元素：$eventDuration等变量未定义

从几个核心方向逐一排查：

1. 核对HTML的data属性命名规则 #

jQuery的.data()会自动将HTML中短横线分隔的data属性转为驼峰式命名，对应关系必须严格匹配：

• HTML里的data-event-duration → JS里的eventDuration
• HTML里的data-employee-rate → JS里的employeeRate

排查动作：
打开浏览器控制台的Elements面板，找到目标DOM元素，查看它的dataset属性，确认是否存在eventDuration和employeeRate字段。如果没有，说明HTML属性名写错了（比如写成data-eventduration没加短横线、或者拼写错误）。

2. 确认$(this)的指向是否正确 #

$usertype能正常获取，说明$(this)指向的元素带有data-usertype，但未必包含另外两个属性——比如事件绑定在父元素上，$(this)是父元素，而data-event-duration和data-employee-rate属于子元素。

排查动作：
在变量获取代码前加一行console.log($(this))，查看控制台输出的DOM元素是否是你期望的目标元素。如果不是，调整选择器或用$(e.target)（需在事件函数中传入e参数）定位到正确元素。

3. 检查脚本执行时机 #

如果JS代码在DOM元素渲染完成前就执行，$(this)可能找不到目标元素，自然获取不到data属性。

解决方法：
把JS代码包裹在$(document).ready()中，或者放在页面底部（</body>标签前），确保DOM加载完成后再执行逻辑。

4. 用原生方法验证排除jQuery问题 #

可以直接用原生JS的dataset属性获取，排除jQuery的适配问题：

const eventDuration = this.dataset.eventDuration;
const employeeRate = this.dataset.employeeRate;
console.log(eventDuration, employeeRate);

如果原生方法能拿到值，说明是jQuery.data()的使用问题；如果也拿不到，那肯定是HTML属性或元素指向的问题。

内容的提问来源于stack exchange，提问作者b-rad90