如何访问动态创建的锚标签jQuery的数据属性

Question

When trying to retrieve the "data" attributes of a dynamically created anchor element, the function is unable to navigate $this to the attributes.

I've tried to use 'attr()' and navigate using 'closest()' but I'm unable to progress into the attributes: NamedNodeMap.

 function populateDropdown(data) { data = JSON.parse(data); let anchorItem = $(' <a class="dropdown-item disabled" href="#" id = "imagingSelection" > Imaging < /a>'); let anchorDivider = $('<div class="dropdown-divider"></div>'); $("#typeSelection").append(anchorItem); $("#typeSelection").append(anchorDivider); for (var i = data.length - 1; i >= 0; i--) { let anchorItem = $(`<a id="anchor${i}" class="dropdown-item" href="#" data-sensitivity:"${data[i].sensitivity}" data-specicifity:"${data[i].specicifity}" data-nnh:"${data[i].numberToHarm}">${data[i].name}</a>`) $("#typeSelection").append(anchorItem); } } //Deal with click on dynamic DOM anchor creation $('body').on('click', 'a.dropdown-item', function() { console.log($(this)); }); 

The console shows k.fn.init [a#anchor1.dropdown-item], which when I expand I can see the attributes in NamedNodeMap that I want, but cannot find a way to access

Answer 1

You need to use = after the data-XXX attributes, not : , eg data-sensitivity="${data[i].sensitivity}" .

Or you could use jQuery's method for creating elements.

Then use .data() to access the data attribute. jQuery won't actually put it in a DOM attribute; see get wrong value in data attribute jquery

BTW, you misspelled "specificity".

 function populateDropdown(data) { data = JSON.parse(data); let anchorItem = $(' <a class="dropdown-item disabled" href="#" id = "imagingSelection" > Imaging < /a>'); let anchorDivider = $('<div class="dropdown-divider"></div>'); $("#typeSelection").append(anchorItem); $("#typeSelection").append(anchorDivider); for (var i = data.length - 1; i >= 0; i--) { let anchroItem = $("<a>", { id: `anchor${i}`, "class": "dropdown-item", href: "#", data: { sensitivity: data[i].sensitivity, specicifity: data[i].specicifity, nnh: data[i].numberToHarm }, text: data[i].name }); $("#typeSelection").append(anchorItem); } } //Deal with click on dynamic DOM anchor creation $('body').on('click', 'a.dropdown-item', function() { console.log($(this).data("sensitivity")); });