How do I find data-* attribute value on click in jQuery?

Question

I am trying to retrieve a data value which contains an image url when the user clicks on a thumbnail image. HTML is as follows:

<div class="port_image_holder">
<a class="port_enlarge" href="javascript:void(0)">
    <img class="lazy" src="html_includes/include_images/image_loading.jpg"
        data-original="html_includes/include_images/test-image.png"
        data-large="html_includes/include_images/test-image-large.png"
        alt="Caption Goes Here.." />
    <noscript>
        <img src="html_includes/include_images/test-image.png"
             data-large="html_includes/include_images/test-image-large.png"
             alt="" />
   </noscript>
</a>
</div>

Basically when the user clicks on the image I need to obtain the url set in the data-large attribute.

Currently I can get the url from the src using the find() method:

var img_url=$(this).find('img').attr('src');

but so far have had no luck getting the data reference. Please note that there are numerous port_image_holder classes on the page as these are looped out as required.

not this: var img_url=$(this).find('img').attr('data-large'); ? — Ivan Chernykh
– Ivan Chernykh, Commented Jun 10, 2013 at 7:52
Thanks @halib - tried this but for some reason did not work - just tried it again and it did ! Perhaps I had a typo in my original attempt. — Sideshow
– Sideshow, Commented Jun 10, 2013 at 7:57

palaѕн · Accepted Answer · 2020-05-02 16:04:55Z

9

You can find data-large attribute on the image using .data() method like:

var img_url = $(this).find('img').data('large');

// Check the console for url
console.log(img_url);

edited May 2, 2020 at 16:04

answered Jun 10, 2013 at 7:58

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I find data-* attribute value on click in jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related