How to access dynamically added elements and their IDs using jQuery or JavaScript in general?

Question

I have a list of restaurants, and each restaurant has its articles. For each restaurant representation in the list I have a button. By clicking this button, I want to redirect the user to the page with articles of the specific restaurant.

The restaurant list is dynamically generated via jQuery. I tried giving the button an ID with the restaurant name, but whatever button I click, it gives me the name of the first restaurant in the list. Here is the code:

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

As you can see in the for loop I give an appropriate ID to every button, and then in the delegate function I access the button through links with the parent. But like I said earlier, whatever button is clicked, the output is the name of the first restaurant in the list. It's possible I am misinterperting how the delegate function works.

Does anyone have any idea why this isn't working? And if this way is dead end, please provide me an alternative solution. Thanks in advance

Possible duplicate of [Getting the ID of the element that fired an event](https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event) — Heretic Monkey, Aug 14 '18 at 20:50

score 2 · Accepted Answer · answered Aug 14 '18 at 20:51

2

Replace this

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

With below one and it should work

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

This is beacuse dynamically added element should reference body or document to delegate click event on dynamic id/class. Also this keyword will corresponds to current clicked button.

answered Aug 14 '18 at 20:51

Niraj

602
2
7
12

`var id = this.id;` should be sufficient, no need to invoke jQuery here, I think – Calvin Nunes Aug 14 '18 at 20:56
I'm almost sure it will, because `this` refers to the element, not to the jQuery object, so you can access `id` directly. But, it's up to you, it's your answer anyway :D – Calvin Nunes Aug 14 '18 at 21:02

score 0 · Answer 2 · answered Aug 14 '18 at 20:57

When trying to get the id of the button

var id = $("#restaurantList .row .card .card-body .btn").attr("id");

this will cycle through the page and return the first element of #restaurantList .row .card .card-body .btn which is why it doesn't matter what button you click on, you will always get the same result.Thn the click by using $(this) you are referring to the button that has been clicked.

hope this helps.

How to access dynamically added elements and their IDs using jQuery or JavaScript in general?

2 Answers2