如何通过JS访问Mustache模板？登录后header.mustache中{{name}}显示用户名，但JS获取$('#user_id').text()返回空值的原因排查

用户登录后，header.mustache模板中的{{name}}能正常显示用户名，但用JavaScript的$('#user_id').text()获取时却返回空值，想知道这是什么原因？

相关代码如下：

header.mustache 代码 #

<div class="navbar-collapse collapse" id="navbarSupportedContent"> 
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4"> 
{{#userName}} 
<li class="nav-item"> 
<span class="nav-link active" id="user" aria-current="page" id="user_id">{{name}}</span> 
</li> 
<li class="nav-item"> 
<a href="/logout" class="nav-link active" role="button">Logout</a> 
</li> 
{{/userName}} 
{{^userName}} 
<li class="nav-item"> 
<a href="/oauth2/authorization/google" class="nav-link active" aria-current="page" >Login</a> 
</li> 
{{/userName}} 
<li class="nav-item"> 
<a href="/perfume/save" class="nav-link active" aria-current="page">register</a> 
</li> 
</ul> 
</div>

index.js 代码 #

save: function () { 
let data = { 
userId: $('#user_id').text(), 
perfumeName: $('#favorite_perfume').val(), 
image: $('#unfavorable_perfume').val() 
}; 
$.ajax({ 
type: 'POST', 
url: '/api/v1/pre', 
dataType: 'json', 
contentType: 'application/json; charset=utf-8', 
data: JSON.stringify(data) 
}).done(function () { 
alert('Pass'); 
window.location.href = '/'; 
}).fail(function (error) { 
alert(JSON.stringify(error)); 
}); 
}

嘿，我一眼就瞅出问题所在了——你的<span>标签里重复定义了两个id属性：id="user"和id="user_id"！

HTML规范里明确要求，一个元素只能有一个唯一的id，浏览器解析的时候只会认第一个出现的id，也就是这里的user。所以你用$('#user_id')去查找元素，浏览器根本找不到对应的节点，自然返回空值。

解决起来超简单，只需要删掉重复的id，把<span>标签改成这样就行：

<span class="nav-link active" id="user_id" aria-current="page">{{name}}</span>

顺带提个小细节：如果你的JS代码是在页面完全加载前执行的，也可能出现获取不到元素的情况，但从你说{{name}}已经正常显示来看，页面肯定渲染完成了，所以核心问题就是这个重复id的坑。改完之后再试，$('#user_id').text()就能正常拿到用户名啦！

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