After you delegate a set of button events, click on one of them, and the others will be executed as well. Why? How do you make each button have its own event?

problem description

add

  • in bulk to one page, add edit and delete buttons for each li:

    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!


  • it was normal when I tested it, and it didn't trigger everything.


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

    what you bind here is the class name edit. Look where you loop. Every edit button has this class name, so when you click it, it naturally contains

    .

    buttons with the name of the edit class will be executed once. If you change it to id, all the buttons will not be executed, or if you set an attribute, it will be passed into

    when you click.

    go and determine if it is the one currently clicked.

    Menu