jQuery onclick not getting proper values

Question

I am trying to get Image ALT values on click event but it's not working as it should be and displays the same value (Image ALT) on click.

Here is the code:

HTML:

<a href="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_large.gif?v=1420644155" class="product-photo-thumb" title="Map 1">
    <img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_compact.gif?v=1420644155" alt="Map 1">
</a>

<a href="//cdn.shopify.com/s/files/1/0720/9527/products/png_large.png?v=1420644163" class="product-photo-thumb" title="Map 2">
    <img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/png_compact.png?v=1420644163" alt="Map 2">
</a>

Javascript / jQuery

$(document).ready(function(){
    $('.product-photo-thumb').on("click", function (e) {
      e.preventDefault();
      alert(document.getElementById("imgVariants").alt);
    });
});

>> jsFiddle link

Am I missing anything?

P.S.: I know IDs must be unique but I wanted a solution that can work even without unique IDs.

...and to explain why: Browsers keep a fast lookup dictionary for IDs, which contain a single DOM element against each ID value. This means that document.getElementById (and therefore jQuery also) can only see the first occurring element with a specific ID. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 8, 2015 at 9:54
@A.Wolff I know IDs must be unique but I wanted a solution that can work even without unique IDs. — Dipak G.
– Dipak G., Commented Jan 8, 2015 at 9:59
@DipakG. that can work even without unique IDs Why that? This doesn't make sense at all... — A. Wolff
– A. Wolff, Commented Jan 8, 2015 at 10:15
@A.Wolff Have you seen the answers posted below? It works without having unique IDs. — Dipak G.
– Dipak G., Commented Jan 8, 2015 at 10:17

Naeem Shaikh · Accepted Answer · 2015-01-08 09:56:20Z

2

There are two elements with same Id(shouldnt be), remove them and you should use something like e.target

here is an working example.. http://jsfiddle.net/83cyuozz/1/

   $(document).ready(function(){
        $('.product-photo-thumb').on("click", function (e) {
          e.preventDefault();
          alert(e.target.alt);
        });
      });

edited Jan 8, 2015 at 9:56

answered Jan 8, 2015 at 9:48

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

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

Comments

Girish · Accepted Answer · 2015-01-08 09:55:22Z

2

try this code

$(document).ready(function(){
    $('.product-photo-thumb').on("click", function (e) {
      e.preventDefault();
      alert($(this).find('img').attr('alt'));
    });
});

DEMO

NOTE ID must be unique.

edited Jan 8, 2015 at 9:55

answered Jan 8, 2015 at 9:50

Girish

12.2k3 gold badges37 silver badges54 bronze badges

Comments

TechGirl · Accepted Answer · 2015-01-08 10:02:36Z

2

Here is the working example where there can be multiple elements with same ID, and yet it will work fine: JSFIDDLE

  $(document).ready(function(){
    $("body").on("click",".product-photo-thumb", function (e) {
      e.preventDefault();

      alert($(this).children("img").attr("alt"));
    });
  });

answered Jan 8, 2015 at 10:02

TechGirl

4782 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery onclick not getting proper values

3 Answers 3

Comments

DEMO

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related