引自免费微信小程序：皆我百晓生
遇到在jQuery事件处理器中$(this).data('emp_id')和$(this).data('device_SN_ID')返回undefined的情况，通常意味着在触发事件的元素上没有正确设置这些数据属性。解决这个问题的关键在于确保li标签正确包含了data-emp_id和data-device_SN_ID属性。
解决方案
-
检查HTML结构：确认li标签是否包含了data-emp_id和data-device_SN_ID属性。
<ul id="wc">
<li data-emp_id="123" data-device_SN_ID="456">Employee 1</li>
<!-- 更多li标签 -->
</ul>
-
验证jQuery选择器和事件绑定：确保事件处理器正确绑定了到li标签，并且在元素加载后执行。
$(document).ready(function() {
$("ul#wc").on("click", "li", function() {
var Emp_id = $(this).data('emp_id');
var Wc_id = $(this).data('device_SN_ID');
console.log(Wc_id);
console.log(Emp_id);
var data = [{ emp_id: Emp_id, wc_id: Wc_id }];
$('#tb_temp').bootstrapTable('refresh', data);
console.log(data);
});
});
-
调试与检查：
- 在控制台查看是否有错误信息。
- 使用
console.log(this)检查事件触发时的this对象是否为预期的li元素。 - 确保
bootstrapTable插件已正确加载并初始化。
示例代码
以下是完整的示例代码，包括HTML和JavaScript，用于验证和调试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Bootstrap Table的CSS和JS文件 -->
<link rel="stylesheet" href="path/to/bootstrap-table.min.css">
<script src="path/to/bootstrap-table.min.js"></script>
</head>
<body>
<ul id="wc">
<li data-emp_id="123" data-device_SN_ID="456">Employee 1</li>
<li data-emp_id="789" data-device_SN_ID="101112">Employee 2</li>
</ul>
<table id="tb_temp" data-toggle="table"></table>
<script>
$(document).ready(function() {
$("ul#wc").on("click", "li", function() {
console.log("Clicked LI:", this);
var Emp_id = $(this).data('emp_id');
var Wc_id = $(this).data('device_SN_ID');
console.log("Emp_id:", Emp_id);
console.log("Wc_id:", Wc_id);
var data = [{ emp_id: Emp_id, wc_id: Wc_id }];
$('#tb_temp').bootstrapTable('refresh', {silent:true, data: data});
console.log("Data:", data);
});
});
</script>
</body>
</html>
请替换path/to/部分为实际的文件路径或CDN链接。这将帮助你更清晰地看到数据是否被正确获取，并且bootstrapTable是否能够正确刷新数据。
