.data（）没有返回undefined

Question

我尝试使用.data从属性中获取值。

HTML

<div class="like" data-postid="903282304865jh"> </div>

JS

$(".like").click(function(event){ 
      var postID = $(event.target).data('postid');
      console.log(postID);
});

我在控制台中返回了未定义的内容。这里发生了什么？

Answer 1

使用$(this)代替$(event.target)：

  var postID = $(this).data('postid');

如果div中没有​​其他元素，则代码可以正常工作。

另请考虑将target.event与this进行比较：

event.target

启动事件的DOM元素。 read more

---

this

在jQuery中，被执行的元素通常会传递给jQuery函数的函数参数。可以使用$(this)将其创建为jQuery元素对象。 read more

实施例

您的代码变为：

$(".like").click(function(event){     
      var postID = $(this).data('postid');
      alert(postID);
});

HTML示例如下：

<div class="like" data-postid="903282304865jh"><i>A</i> Test</div>

JSFIDDLE

Answer 2

将event.target更改为this。 event.target将是被点击的元素，因此它可能是您div的任何子元素。 this将是您的选择器引用的元素：

$(".like").click(function(event){ 
      var postID = $(this).data('postid');
      alert(postID);
});

<强> Working Demo

Answer 3

$(".like").click(function(event){ 
    var postID = this.attributes['data-postid'].nodeValue
    console.log(postID);
});

或

$(".like").click(function(event){ 
    var postID = $(this).data('postid')
    console.log(postID);
});

Answer 4

这对我有用：

var target = event.target;

var getData = $(target).data('user-id');