如何访问动态创建的锚标记的数据属性 jquery
How to access data attribute of dynamically created anchor tag jquery
当尝试检索动态创建的定位元素的 "data" 属性时,该函数无法将 $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中的属性,但找不到访问方法
您需要在 data-XXX
属性后使用 =
,而不是 :
,例如data-sensitivity="${data[i].sensitivity}"
.
或者您可以使用 jQuery 的方法来创建元素。
然后使用.data()
访问数据属性。 jQuery 实际上不会把它放在 DOM 属性中;见 get wrong value in data attribute jquery
顺便说一句,你拼错了 "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"));
});