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属性中。参见get wrong value in data attribute 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"));
});

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

1 个答案: