Binding click to a repeated div ID

Question

I\'m trying to create a div popup gallery type thing. But I\'m having an issue with my approach.

I have a few linked thumbnail images, which link to the lar

Answer 1

All IDs must be unique. If you wish to repeat an ID, you should use a class instead.

Answer 2

According to documentation, your id has do be unique in the page. If you want to have more HTML elements with that style (for exapmle), use class.

id = name [CS]:

This attribute assigns a name to an element. This name must be unique in a document.

class = cdata-list [CS]:

This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

<a href="www.google.com" class="galImage">
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg">
</a>
<br />
<a href="www.yahoo.com" class="galImage">
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg">
</a>

Then when you select with jQuery that class you use $(".galImage").

$('.galImage').click(function(e){
    e.preventDefault();
    alert($(this).attr("href"));
});

Updated your jsFiddle.

Answer 3

When we have to attach an event/style with multiple elements, we have to use classes. Id means a unique value for each element.

Answer 4

An element's Id must be unique. So you can't have two a tags with same ids.

<a href="www.google.com" class="galImage">
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg">
</a>
    <br />
<a href="www.yahoo.com" class="galImage">
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg">
</a>

JS:

$('.galImage').click(function(e){
    e.preventDefault();
    alert($(this).attr("href"));
});

Answer 5

Ids are supposed to be unique. You can use a classes instead of IDs and bind to the class name.

In your fiddle add class=galImage to each Href and then in your jQuery binding, use .galImage instead of #galImage. jQuery should then bind to all elements with class name of galImage

Answer 6

You need to use classes instead as IDs must be unique.

E.g

<a href="www.google.com" id="Google" class="galImage">
   <img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg">
</a>
<br />
<a href="www.yahoo.com" id="Yahoo" class="galImage">
   <img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg">
</a>

and your jQuery would be

$('.galImage').click(function(e){
        e.preventDefault();
        alert($(this).attr("href"));
    });