通常，如何使用jQuery或JavaScript访问动态添加的元素及其ID？

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

餐厅列表是通过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;
        });
    })

$（文档）.ready（函数（）{
var=[]；
美元({
url:“/WebProjekat/rest/restaurants”，
成功：功能（餐厅）{
休息=餐馆；
警报（“餐厅SSS”）；
警报（餐厅[0]。名称）；
var arrayLength=0.length；
对于（变量i=0；i”+餐厅[i]。类别+”
”+
"" + 
“见文章”+”+）；
}
}
})
$（“#添加餐厅”）。单击（函数（）{
window.location.href=“addRestaurants.html”；
});
$（“#添加文章”）。单击（函数（）{
window.location.href=“addArticles.html”；
});
$（“#restaurantList”）。在（'click'，'.btn'，function（）上{
//$("")
var id=$（“#restaurantList.row.card.card body.btn”）.attr（“id”）；
警报（id）；
window.location.href=“articles.html？restaurant=“+id；
});
})

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

---

有人知道为什么这不起作用吗？如果这条路走不通，请给我一个替代方案。提前感谢

更换此

$("#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;
});

---

这是因为动态添加的元素应该引用主体或文档来委托动态id/类上的单击事件。此外，此关键字将对应于当前单击的按钮。

替换此

$("#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;
});

---

这是因为动态添加的元素应该引用主体或文档来委托动态id/类上的单击事件。此外，此关键字将对应于当前单击的按钮。

尝试获取按钮id时

var id=$（“#restaurantList.row.card.card body.btn”）.attr（“id”）

这将在页面中循环并返回
#restaurantList.row.card.card body.btn
的第一个元素，这就是为什么无论单击哪个按钮，您都会得到相同的结果。使用
$（this）
单击时，您指的是已单击的按钮

希望这对您有所帮助。
尝试获取按钮id时

var id=$（“#restaurantList.row.card.card body.btn”）.attr（“id”）

这将在页面中循环并返回
#restaurantList.row.card.card body.btn
的第一个元素，这就是为什么无论单击哪个按钮，您都会得到相同的结果。使用
$（this）
单击时，您指的是已单击的按钮

希望这有帮助。
您可能需要执行
var id=this.id
您可能想要执行的可能重复的
var id=this.id可能重复的
var id=this.id
应该足够了，这里不需要调用jQuery，我想我几乎可以肯定它会，因为
这个
引用的是元素，而不是jQuery对象，所以您可以直接访问
id
。但是，这取决于你，这是你的答案：D
var id=this.id
应该足够了，这里不需要调用jQuery，我想我几乎可以肯定它会，因为
这个
引用的是元素，而不是jQuery对象，所以您可以直接访问
id
。但是，这取决于你，你的答案是：D