javascript - 一般如何使用 jQuery 或 JavaScript 访问动态添加的元素及其 ID？

Question

我有一个餐厅列表，每个餐厅都有其文章。对于列表中的每个餐厅代表，我都有一个按钮。通过单击此按钮，我想将用户重定向到包含特定餐厅文章的页面。

餐厅列表是通过 jQuery 动态生成的。我尝试为该按钮提供一个包含餐厅名称的 ID，但无论我单击什么按钮，它都会为我提供列表中第一家餐厅的名称。这是代码:

    $(document).ready(function() {    
        var rests = [];

        $.get({
            url: "/WebProjekat/rest/restaurants",
            success: function(restaurants) {
                rests = restaurants;
                alert("restaurantssss");
                alert(restaurants[0].name);
                var arrayLength = restaurants.length;
                for(var i=0; i < arrayLength; i++) {
                    $("#restaurantList").append("<div class=\"row\">" + 
                    "<div class=\"card\" style=\"width: 18rem;\">" + 
                    "<img class=\"card-img-top\" src=\"restaurant.jpg\"" +
                    "alt=\"Card image cap\"><div class=\"card-body\">" + 
                    "<h5 class=\"card-title\">" + restaurants[i].name + "</h5>" + 
                    "<p class=\"card-text\">" + restaurants[i].category + "</p>" +
                    "<button id=\"" + restaurants[i].name + "\" class=\"btn\">" + 
                    "See articles" + "</button>" + "</div></div></div>");
                }
            }
        })
        $("#addRestaurant").click(function(){
            window.location.href = "addRestaurants.html";
        });

        $("#addArticle").click(function(){
            window.location.href = "addArticles.html";
        });

        $("#restaurantList").on('click', '.btn', function() {
            //$("")
            var id = $("#restaurantList .row .card .card-body .btn").attr("id");
            alert(id);
            window.location.href = "articles.html?restaurant="+id;
        });
    })

正如您在 for 循环中看到的，我为每个按钮提供了适当的 ID，然后在委托(delegate)函数中，我通过与父级的链接访问该按钮。但正如我之前所说，无论单击什么按钮，输出都是列表中第一家餐厅的名称。我可能误解了委托(delegate)函数的工作原理。

有人知道为什么这不起作用吗？如果这种方式是死胡同，请为我提供替代解决方案。提前致谢

Answer 1

替换这个

$("#restaurantList").on('click', '.btn', function() {
     //$("")
     var id = $("#restaurantList .row .card .card-body .btn").attr("id");
     alert(id);
     window.location.href = "articles.html?restaurant="+id;
});

使用下面的一个应该可以工作

$("body").on('click', '.btn', function() {
     //$("")
     var id = $(this).attr("id");
     alert(id);
     window.location.href = "articles.html?restaurant="+id;
});

这是因为动态添加的元素应该引用正文或文档来委托(delegate)动态 ID/类上的单击事件。此外这个关键字将对应于当前点击的按钮。