点击下拉菜单链接调用JavaScript函数时触发Unexpected end of input错误

嗨，我看到你的问题了——点击下拉菜单里的链接时出现Unexpected end of input语法错误，咱们来一步步拆解问题并解决它。

首先贴出你的原始代码方便参考：

<html> 
<head> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 
<title>CodeConfig</title> 
<style> 
.btn-primary-spacing { margin-right: 10px; margin-bottom: 5px !important; } 
body { padding: 10px; } 
.dropdown:hover .dropdown-menu { display: block; margin-top: 0; /* remove the gap so it doesn't close */ } 
</style> 
</head> 
<body> 
<div class="container"> 
<h2>CodeConfig Keys</h2> 
<br> 
<div id="key-buttons"> 
</div> 
</div> 
<script type="text/javascript"> 
function linkClickFunc(item,key) { 
console.log("trying"); 
console.log(item + key); 
} 
</script> 
<script> 
$(document).ready(function(){ 
CodeConfigkeys = {"ENV": ["Subhayan", "Mary"], "DB_PARAMS": ["SQL_CONNECTIONS_DB", "SQL_CONNECTIONS_COLLECTION"]}; 
var html_str = ""; 
$.each( CodeConfigkeys, function( key, value ){ 
html_str = html_str + "<div class=\"btn-group dropdown\">"; 
html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key; 
html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>"; 
html_str = html_str + "<div class=\"dropdown-menu\">"; 
submenus = value; 
console.log(submenus); 
value.forEach(function(item, index, array) { 
//html_str = html_str + "<li><a href=\"#\">" + item + "</a></li>"; 
html_str = html_str + "<li><a href=\"javascript:linkClickFunc(\"" + item + "\",\"" + key + "\");\">" + item + "</a></li>"; 
}); 
html_str = html_str + "</div></div>"; 
}); 
//console.log(html_str); 
$("#key-buttons").html(html_str); 
}); 
</script>
</body>
</html>

错误原因 #

问题出在你生成下拉链接的这段代码里：

html_str = html_str + "<li><a href=\"javascript:linkClickFunc(\"" + item + "\",\"" + key + "\");\">" + item + "</a></li>";

当这段代码被渲染成HTML时，会出现引号冲突的问题。举个例子，当item是Subhayan，key是ENV时，生成的HTML会变成：

<li><a href="javascript:linkClickFunc("Subhayan","ENV");">Subhayan</a></li>

你看，href属性是用双引号(")包裹的，而你在函数参数里也用了双引号，这会导致浏览器认为href的属性值在javascript:linkClickFunc(之后就结束了，剩下的"Subhayan","ENV");">就成了无效的语法，从而抛出Unexpected end of input错误。

修复方案 #

这里有两种靠谱的修复方式，你可以选一种：

方案1：改用单引号包裹函数参数 #

把生成链接的代码改成这样，用单引号代替双引号来包裹函数的字符串参数，同时保持href的双引号：

html_str = html_str + "<li><a href=\"javascript:linkClickFunc('" + item + "','" + key + "');\">" + item + "</a></li>";

这样渲染后的HTML就会变成：

<li><a href="javascript:linkClickFunc('Subhayan','ENV');">Subhayan</a></li>

引号不再冲突，语法就正确了。

方案2：使用事件绑定（更推荐） #

内联的javascript:写法其实不是最佳实践，更好的方式是给链接添加自定义属性，然后用jQuery绑定点击事件，这样代码更清晰也更易维护：

1. 修改生成链接的代码，把item和key存在data-*属性里：

html_str = html_str + "<li><a href=\"#\" data-item=\"" + item + "\" data-key=\"" + key + "\">" + item + "</a></li>";

2. 在$(document).ready函数的末尾，添加事件绑定的代码：

// 给所有下拉菜单的链接绑定点击事件
$("#key-buttons").on("click", ".dropdown-menu a", function(e) {
    e.preventDefault(); // 阻止默认的跳转行为
    const item = $(this).data("item");
    const key = $(this).data("key");
    linkClickFunc(item, key);
});

这样不仅解决了引号问题，还让代码结构更清晰，避免了内联脚本的潜在问题。

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