jquery - .data() 不返回未定义

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.eventwith this：

event.target

启动事件的 DOM 元素。阅读更多

---

this

在 jQuery 中，被操作的元素通常作为 this 传递给 jQuery 函数的函数参数。它可以通过使用$(this). 阅读更多

例子

您的代码变为：

$(".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);
});

工作演示

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');