JQuery get text on click from appended element

Question

Right now I am trying to get data from a database and then append it to a list of custom divs using JQuery which works fine.

var str = $('<brand-card class="pbt" img="img/brands/' + brand.getName() + '.jpg">' + brand.getName() +'</brand-card>');
        str.appendTo("#perfectbrand-card-container");

After this, I am trying to make it so when one of them is clicked, I am able to get the brand name that I used earlier but it is just returning blank.

 $("#perfectbrand-card-container").on('click','.pbt', function() {
    console.log($(this).text());
});

Is there any way to get this text from the appended object. All help is appreciated. Thanks

Answer 1

You are appending it to #perfectbrand-card-container so use that selector instead of .perfectbrand-container

$("#perfectbrand-card-container").on('click','.pbt', function() {
//-^--------------^-------------
    console.log($(this).text());
});