在单击下拉菜单中的链接时调用 javascript 函数时出现意外的输入结束错误

下面是我正在显示的HTML文件的代码：

<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>，你必须将Jquery添加到你的网站：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

并从href中删除javascript:：

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

这是工作一：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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);
}
$(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;
value.forEach(function(item, index, array) {
//html_str = html_str + "<li><a href="#">" + item + "</a></li>";
html_str = html_str + "<li><a href="linkClickFunc("" + item + "","" + key + "");">" + item + "</a></li>";
});
html_str = html_str + "</div></div>";
});
$("#key-buttons").html(html_str);
});
</script>

从<a href="javascript:linkClickFunc("" + it中删除javascript:，它工作得很好。

此外，将<a href="javascript:linkClickFunc("" + item + "","" + key + "");">更改为<a onclick="linkClickFunc('" + item + "','" + key + "');">"

问题是您的 href 看起来像href="linkClickFunc("item","item")"如您所见，那么您会遇到太多"

的问题演示

function linkClickFunc(item, key) {
console.log("trying");
console.log(item + key);
}
$(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;
value.forEach(function(item, index, array) {
//html_str = html_str + "<li><a href="#">" + item + "</a></li>";
html_str = html_str + "<li><a onclick="linkClickFunc('" + item + "','" + key + "');">" + item + "</a></li>";
});
html_str = html_str + "</div></div>";
});
$("#key-buttons").html(html_str);
});

.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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div class="container">
<h2>CodeConfig Keys</h2>
<br>
<div id="key-buttons">
</div>
</div>

相关内容

最新更新

热门标签：