使用Jquery在单击时获取数据属性

当单击处理程序绑定到其外部div时，如何使用jquery获取所选

a

的

数据属性

<ul class="js-click">
  <li><a href="" data-attr="hello">Hello</a></li>
  <li><a href="" data-attr="world">World</a></li>
</ul>


$('.js-click').on('click', function(e) {

});





$（'.js click'）。on（'click'，函数（e）{
});

这里的限制是，我必须绑定对
的点击。您可以通过点击事件通过
e.target
访问目标

$('.js-click').on('click', 'a', function(e) {
    var data = $(e.target).data("attr");
});

您可以这样做：

$('.js-click').on('click','a', function(e) {
 var data=$(this).data('attr');
}); 

收听点击
anchor

//this would bind a handler that would execute anytime the ul is clicked
$('.js-click').on('click', function(e) { });

你问了两个问题。如何绑定处理程序，然后如何访问数据属性

绑定处理程序

您已经接近将处理程序绑定到
jsclick
类，但是您可以通过添加一个过滤器来获得更细粒度


要访问数据，只需使用密钥，在本例中，该密钥是
attr
。值得注意的是，您可以直接访问该属性，但可以使用其中一个（最好是
.data
）

e、 g.用你的加价。。

把它们放在一起，你就能做到这一点

$('.js-click').on('click', 'a', function(e) {
    var data = $(this).data('attr');

    //quick sanity check to make sure the attribute exists
    if(typeof data !== 'undefined') {
        //do stuff
    }
});

我建议检查目标，确保它是锚定标签，否则答案就可以了
$('a').data('attr', 'hello');

$('.js-click').on('click', 'a', function(e) { 
    var $this = $(this);
    $this.data('attr', 'I changed');
    //what will the value be?  It's going to be 'Hello', because we're accessing the attribute in the DOM
    alert($this.attr('data-attr'));

    //what will the value be?  It's going to be 'I changed', because we're accessing the data cache
    alert($this.data('attr'));
});

$('.js-click').on('click', 'a', function(e) {
    var data = $(this).data('attr');

    //quick sanity check to make sure the attribute exists
    if(typeof data !== 'undefined') {
        //do stuff
    }
});