使用Mustache.js生成data-id失败，AJAX删除及jQuery报错求助

看起来你遇到了两个核心问题：Mustache渲染后data-id为空，以及jQuery文件报错。咱们一步步来排查解决：

1. 修复Mustache模板的写法问题 #

你的模板字符串里用了HTML实体转义（<），这其实没必要，直接用正常的HTML标签就行，而且data-id的引号写法可能干扰了Mustache的渲染。建议把模板改成更清晰的写法：

// 用反引号创建模板字符串，避免转义和拼接麻烦
const nameTemplate = `
<li>
  <p>Name: {{name}}</p>
  <p>Position: {{position}}</p>
  <button data-id="{{id}}" class="remove">X</button>
</li>
`;

这样写不仅可读性更高，还能避免转义字符导致的Mustache解析异常。另外要确保你渲染模板时传入的数据确实包含id字段，比如：

// 示例渲染代码，确保每个user对象都有id
const users = [
  { id: 1, name: "John", position: "Developer" },
  { id: 2, name: "Jane", position: "Designer" }
];
const renderedHtml = Mustache.render(nameTemplate, { users: users });
document.getElementById('displayUsers').innerHTML = renderedHtml;

如果数据里没有id，Mustache自然会渲染为空，这是最常见的原因。

2. 排查jQuery报错问题 #

你提到jQuery压缩文件有红色下划线，首先要确认：

• 你是否正确引入了jQuery文件？比如在HTML头部或body末尾添加本地文件或CDN链接（确保路径/链接有效）：

  <script src="jquery.min.js"></script>
  

• $displayUsers变量是否正确初始化？应该先获取DOM元素再使用：

  const $displayUsers = $('#displayUsers');
  

  如果没初始化就直接调用$displayUsers.delegate，肯定会触发报错。

3. 优化AJAX删除请求的URL拼接 #

你的URL拼接有问题，现在的写法会把data-id直接拼在文件名后面，变成test.json1这种错误格式，应该加上斜杠或者查询参数：

$.ajax({
  type: "DELETE",
  // 如果id是路径参数，加斜杠分隔
  url: `http://localhost/JS/REST%20API%20JSON/test.json/${$(this).attr('data-id')}`,
  // 或者如果是查询参数：url: "http://localhost/JS/REST%20API%20JSON/test.json?id=" + $(this).attr('data-id')
  success: function() {
    // 成功后记得移除对应的li元素，提升用户体验
    $(this).closest('li').remove();
  }.bind(this) // 绑定this上下文，确保success里能访问到按钮元素
});

另外，delegate方法在jQuery 3.0之后已经被on方法取代，建议改用更现代的事件委托写法：

$displayUsers.on("click", ".remove", function(){
  // AJAX代码放在这里
});

最后检查步骤 #

1. 打开浏览器控制台（F12），查看是否有JavaScript报错，比如Mustache未定义、jQuery未定义等基础问题。
2. 渲染完成后，右键检查按钮元素，看data-id是否存在；如果还是空，打印你传入Mustache的数据，确认id字段是否真的存在。

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