jQuery AJAX读取JSON生成表格，点击按钮传参报错求助

这个问题我太熟了！你遇到的Uncaught ReferenceError: mylapore is not defined错误，核心原因是生成按钮的内联onclick事件时，没有把字符串类型的area值用引号包裹，浏览器把mylapore当成了一个变量去查找，自然找不到就报错了。咱们一步步来修复：

错误原因拆解 #

你拼接按钮HTML的代码是这样的：

row+= '<td><button onclick="JavaScript:showDetails('+area+');">' + 'View Details' + '</button></td>'

当area的值是mylapore时，最终生成的HTML会变成：

<button onclick="JavaScript:showDetails(mylapore);">View Details</button>

这里的mylapore没有引号，浏览器会认为它是一个变量，而不是字符串，所以抛出未定义错误。

方案1：给字符串值添加引号（快速修复） #

只需要在拼接时给area加上单引号（注意要转义，避免和外层的单引号冲突）：

row+= '<td><button onclick="JavaScript:showDetails(\''+area+'\');">' + 'View Details' + '</button></td>'

这样生成的HTML就会变成正确的：

<button onclick="JavaScript:showDetails('mylapore');">View Details</button>

此时点击按钮就能正确传递字符串参数，弹窗显示区域名称了。

方案2：使用jQuery事件委托（更优雅的写法） #

内联事件绑定在现代前端开发中并不推荐，更优雅的方式是用事件委托，避免字符串拼接的麻烦，也更易维护：

修改步骤： #

1. 给按钮添加一个类名，比如view-details-btn，去掉内联onclick，同时把area值存在按钮的data-area属性里：

row+= '<td><button class="view-details-btn" data-area="'+area+'">' + 'View Details' + '</button></td>'

2. 在myFunction的success回调外（或者页面加载完成后）绑定事件委托：

$(document).on('click', '.view-details-btn', function() {
  var area = $(this).data('area');
  alert(area);
  // 如果需要展示完整的cityDetails数据，还可以把整个对象序列化后存在data属性里
});

3. 可以删掉原来的showDetails函数，因为事件委托里直接处理了点击逻辑。

额外优化点 #

• 你页面里重复引入了jQuery，只需要保留一个即可，比如删掉其中一行：

<!-- 推荐保留min版，删掉另一行 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

• 如果需要展示完整的cityDetails数据（比如area和station），可以把整个对象序列化后存在data属性里：

// 拼接按钮时
var details = JSON.stringify(childNode[i].cityDetails);
row+= '<td><button class="view-details-btn" data-details="'+details+'">' + 'View Details' + '</button></td>'

// 事件委托里解析并展示
$(document).on('click', '.view-details-btn', function() {
  var details = JSON.parse($(this).data('details'));
  alert(`区域：${details.area}，站点：${details.station}`);
});

这样就能完整展示该行的子节点数据啦！

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