极客观点
项目管理
HarmonyOS
问题描述
在一个页面中批量添加<li>,为每个li添加编辑和删除按钮：
现在给编辑和删除按钮委托事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SUSTech</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/navigation.css">
<link rel="stylesheet" href="../css/news.css">
<link rel="stylesheet" href="../css/publication.css">
<script defer src="../js/fontawesome-all.js"></script>
<script defer src="../js/fa-v4-shims.js"></script>
</head>
<body>
<ul id="listpaper" class="news">
</ul>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
var initPaper = function (data) {
var listPaper = $("#listpaper");
for (var i = 0; i < data.length; i++) {
listPaper.append("<li><span class=\"author\">" + data[i].author + "</span> <span class=\"title\">"
+ data[i].title + "</span><span class=\"journal\">In：" + data[i].journal + "</span><span class=\"time\">" + data[i].place + data[i].date
+ "</span></li> <button class=\"btn btn-success edit\">编辑</button><button class=\"btn btn-danger delete\" >删除</button>")
}
}
$(function () {
$.post("../addpub/findpaper", function (data) {
initPaper(data)
}).error(function (xhr) {
console.log(xhr.status)
})
$(document).on('click', ".edit", function () {
console.log("edit press");
});
$(document).on('click', ".delete", function () {
console.log("delete press");
});
})
</script>
</html>发现点击其中一个编辑按钮，其他的编辑按钮都执行了，这是为什么？
希望大佬能指出我的编程问题，新手一枚，谢谢！
我测试下是正常的，并没有触发所有呀。