我创建了一个程序，该程序从SQL数据库中打印出一个列表。到现在为止还挺好。我可以打印出清单。但是，最近，我尝试为打印出的每个项目添加一个“ X”。最终，这将变成一个系统，用户可以通过该系统单击X来删除项目，但我想通过婴儿步骤来完成此操作。因此，我一直在努力做到这一点，以便当用户单击这些“ X”之一时，它会在执行任何操作之前先向控制台打印“ hello”。但是，这不起作用。
我试过写这两种方式。当我这样做时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body onload = "showList()">
<ol></ol>
<script type="text/javascript">
function showList(){
$.get("/api/toDoList", function(data) {
console.log(data);
for (var i = 0; i < data.length; i++)
{
$("ol").append("<li>" + data[i] + "<span id ='" + i + "'>X</span>" + "</li>");
}
});
};
$("span").click(function(){
console.log("Hello!");
});
//why doesn't this work, or putting an onclick function the span!?
</script>
</body>
</html>
它根本什么也没做。
当我这样做时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body onload = "showList()">
<ol></ol>
<script type="text/javascript">
function showList(){
$.get("/api/toDoList", function(data) {
console.log(data);
for (var i = 0; i < data.length; i++)
{
$("ol").append("<li>" + data[i] + "<span id ='" + i + "' onclick = 'delete()'>X</span>" + "</li>");
}
});
};
function delete(){
console.log("Hello!");
}
</script>
</body>
</html>
我收到一条错误消息：“未捕获的SyntaxError：意外删除令牌”。
您的第一段代码有问题。
它没有执行任何操作，因为您附加了click事件：
$("span").click(function(){ console.log("Hello!"); });
在异步调用之外，这意味着事件已附加到span尚未在DOM中的元素，因为该调用尚未完成。
如果您想将事件附加到将来会添加到DOM中但尚不存在的元素上，请使用委托事件，如下所示：
//the 'ol' is in the DOM since the beginning, so the event is attached fine,
//then you pass the actual element you want the event to be triggered on, as a
//second parameter, in this case 'span'
//this way, it does not matter when 'span's are added to the 'ol', the event
//will always work on them
$('ol').on('click', 'span', function(){
});
您的第二段代码有问题。
这种方法效果很好，因为处理程序已内嵌HTML代码，但现在不建议这样做，因此建议您使用我在代码段中提供的替代方法。正如Hien Nguyen所提到的那样，您得到的错误是，因为它delete是JS中的保留字，所以您不能将其用作函数名。
HIH
function showList(){
//$.get("/api/toDoList", function(data) {
//console.log(data);
let data = ['d1', 'd2', 'd3']; //this is just test data because I can't access '/api/toDoList' (duh)
for (var i = 0; i < data.length; i++) {
$("ol").append("<li>" + data[i] + " <span id ='" + i + "'>X</span>" + "</li>");
}
//});
};
$('ol').on('click', 'span', function(){
console.log("Hello! " + $(this).parent().text());
});
showList();span{
cursor: pointer
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
-->
<ol></ol>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句