Question

我有以下事件监听器 - 如何获取所点击链接的数据属性的值。控制台在下面的例子中给我未定义？

 var removeLink = Dropzone.createElement("<a class='dz-remove' href='javascript:undefined;' data-file-id='2' >Remove file</a>");

 removeLink.addEventListener("click", (e) => {

      e.preventDefault();
      e.stopPropagation();

      var a = $(this);

      console.log(a.attr("data-file-id"));
 });

如果我使用以下语法，我可以使用它，但我需要使用箭头功能，以便我可以访问其他一些属性：

removeLink.addEventListener("click", function (e) { ...});

我已经尝试了以下内容，但完全得到了其他一些内容：

 var a = $(e.currentTarget); 

 console.log(a.attr("data-file-id"));

Answer 1

createElement() 不起作用。如果您想使用字符串创建节点，请使用innerHTML或 insertadjacentHTML()
使用e.target

this

.attr()作为JavaScript方法，而是使用 getAttribute() 。

 document.body.insertAdjacentHTML('beforeend', "<a class='dz-remove' href='javascript:undefined;' data-file-id='2' >Remove file</a>");
 
 var removeLink = document.querySelector('.dz-remove');

removeLink.addEventListener("click", (e) => {

  e.preventDefault();

  var tgt = e.target;

  e.stopPropagation();


  console.log(tgt.getAttribute('data-file-id'));
});

Answer 2

使用

removeLink.addEventListener("click", (e) => {

      e.preventDefault();

      var target = e.currentTarget;

      e.stopPropagation();


      console.log(target.data('file-id'));
    });

如何获取点击链接的数据属性？

2 个答案: