problem description
add
now delegate events to edit and delete buttons:
<!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 = $("-sharplistpaper");
for (var i = 0; i < data.length; iPP) {
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>
found that when one of the edit buttons was clicked, all the other edit buttons were executed. Why?
I hope the boss can point out my programming problem, a novice, thank you!