无法使用jQuery获取元素的属性

Question

I have got this html:

<img src="http://localhost:82/Clone//images/hosts/Kinx_9843a.jpg" data-name="/images/hosts/K_9843a.jpg" alt="">

I am trying to get this:

$('body').on('click','.hostPic',function(){ 
    console.log($(this).attr('data-name'));
});

Whenever the picture is pressed, I want to gets its data-name attribute, but it doesnt work.. I get undefined reported when I try to retrieve the attribute. Any reason why?

Answer 1

Add the hostPic class to that image.

Additionally, you can just use .data('name') , but it doesn't actually make a difference. Older browser may have trouble with .data , but it's never been a problem for me.

Answer 2

$('.hostPic').click(function() {
  console.log($(this).data('name'));
}

Answer 3

Make sure your image has the class 'hostPic' and then do the following in your jQuery:-

$('.hostPic').on('click', function() {
  console.log($(this).data('name'));
}

Answer 4

The following code worked for me, maybe you are attaching the events wrong object, you can understand that by debugging the this object instead of data-name .

And another thing is if you are going to use .data just for read string you should use .attr as the .data caches and tries to convert the value its appropriate type like number or JSON it is a heavier process than .attr .

<img src="http://localhost:82/Clone//images/hosts/Kinx_9843a.jpg" data-name="/images/hosts/K_9843a.jpg" alt="">​

​$("img")​.click(function () { alert($(this).attr("data-name")); });​