How to get the attribute (class, id, data ...) of a dynamically added element? Js

Greetings) Help please)) When an Ajax request dynamically creates an element on the page. How to get the attribute of a dynamically added element when clicking on it? In the console (main.js: 421 Uncaught TypeError: this.attr is not a function)

//Функция которая вызывается в success function moveAjax(answerAjax){ var objAjax = answerAjax; (function addBtn(answerAjax){ let tabBtns = $('.tab-btns'); for(let i = 0; i < objAjax.length; i++){ var btnData = objAjax[i].data; //Динамическое добавление элемента $(tabBtns).append('<li><span data="' + btnData + '">' + objAjax[i].name + '</span></li>'); console.log(objAjax[i].name); }; })(); console.log(objAjax); (function(){ //Обработчик событий на динамически добавлены элкмкнт $(".tab-btns>li").on("click", "span", function(){ console.log(this.attr("data")); //Попытка получить атрибут "data" динамически добавленного элемента }) })(); }; //Запрос $.ajax({ dataType: "json", url: 'js/json/prices/prices.json', cache: false, error: function(XHR, status, error) { console.log(status+' '+error); }, success: function(answerAjax) { moveAjax(answerAjax); } });