為一組button委托事件后，點擊其中一個，其他的也會執(zhí)行，這是為什么？如何讓每個button擁有自己的事件？

問題描述

在一個頁面中批量添加<li>,為每個li添加編輯和刪除按鈕：
圖片描述
現(xiàn)在給編輯和刪除按鈕委托事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SUSTech</title>
    <link rel="stylesheet" >
    <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="http://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>

發(fā)現(xiàn)點擊其中一個編輯按鈕，其他的編輯按鈕都執(zhí)行了，這是為什么？

希望大佬能指出我的編程問題，新手一枚，謝謝！

回答

編輯回答

悶騷型

我測試下是正常的，并沒有觸發(fā)所有呀。

2018年8月5日 18:24

編輯回答

醉淸風

$(document).on('click', ".edit", function () {
  console.log("edit press");
});
$(document).on('click', ".delete", function () {
  onsole.log("delete press");
});

你這里綁定的是edit這個類名，看你循環(huán)那里，每個編輯按鈕都有這個類名，所以點擊的時候自然是所有包含

edit類名的按鈕都會執(zhí)行一次，你改成id就不會全部按鈕都執(zhí)行了，或者你設置個attribute，點擊的時候傳進

去，然后判斷是不是當前點擊的那個。

2017年9月3日 22:35