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

Question

尝试检索动态创建的锚元素的“数据”属性时，该函数无法将$ this导航到属性。

我尝试使用'attr（）'并使用'closest（）'进行导航，但无法进入以下属性：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)); }); 

控制台显示k.fn.init [a＃anchor1.dropdown-item]，当我展开时，可以在NamedNodeMap中看到所需的属性，但是找不到访问方法

Answer 1

您需要在data-XXX属性后使用= ，而不是: ，例如data-sensitivity="${data[i].sensitivity}" 。

或者，您可以使用jQuery的方法来创建元素。

然后使用.data()访问data属性。 jQuery实际上不会将其放在DOM属性中。 看到数据属性jQuery中得到错误的值

顺便说一句，您拼写了“特殊性”。

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