如何访问动态创建的锚标记的数据属性 jquery

Question

当尝试检索动态创建的定位元素的 "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中的属性，但找不到访问方法

Answer 1

您需要在 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"));
});