title: How do I find data-* attribute value on click in jQuery?
body: <p>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:</p>
  
  <pre><code>&lt;div class="port_image_holder"&gt;
  &lt;a class="port_enlarge" href="javascript:void(0)"&gt;
      &lt;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.." /&gt;
      &lt;noscript&gt;
          &lt;img src="html_includes/include_images/test-image.png"
               data-large="html_includes/include_images/test-image-large.png"
               alt="" /&gt;
     &lt;/noscript&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically when the user clicks on the image I need to obtain the url set in the <code>data-large</code> attribute.</p>
  
  <p>Currently I can get the url from the <code>src</code> using the <code>find()</code> method:</p>
  
  <pre><code>var img_url=$(this).find('img').attr('src');
  </code></pre>
  
  <p>but so far have had no luck getting the data reference. Please note that there are numerous <code>port_image_holder</code> classes on the page as these are looped out as required.</p>