Question

当点击处理程序绑定到外部div时，如何使用jquery获取SELECTED data-attr的{{1}}？

这里的限制是我必须绑定<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) { });

上的点击

Answer 1

您可以通过点击事件

访问<a>的目标e.target

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

Answer 2

你可以这样做：

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

听取点击anchor

Answer 3

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

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

绑定处理程序

您已接近将处理程序绑定到js-click类，但您可以通过添加过滤器来获得更多细化。

Refer to the jQuery docs for more info.

$('.js-click').on([event], [filter], [handler]);

//Bind a handler to js-click, but only execute for <a> elements
$('.js-click').on('click', 'a', function(e) { });

访问该数据属性

通过在属性中包含data-前缀，您可以告诉jQuery在准备就绪时自动缓存该值。
Refer to jQuery data docs for more info

<a href="" data-attr="hello">Hello</a>

等同于

$('a').data('attr', 'hello');

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

e.g。与你的标记.. <a href="" data-attr="hello">Hello</a>

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

使用Jquery在click上获取数据属性

3 个答案: