为一组button委托事件后，点击其中一个，其他的也会执行，这是为什么？如何让每个button拥有自己的事件？
问题描述
在一个页面中批量添加<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>发现点击其中一个编辑按钮，其他的编辑按钮都执行了，这是为什么？
希望大佬能指出我的编程问题，新手一枚，谢谢！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我测试下是正常的，并没有触发所有呀。
你这里绑定的是edit这个类名，看你循环那里，每个编辑按钮都有这个类名，所以点击的时候自然是所有包含
edit类名的按钮都会执行一次，你改成id就不会全部按钮都执行了，或者你设置个attribute，点击的时候传进
去，然后判断是不是当前点击的那个。