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.

Answer 1

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