Could you help me to understand - where I made the mistake. I have the following html code:

<div id="container">
    <a href="#info-mail.ru" id="getInfo" onClick="return false;">Info mail.ru</a>
</div>
<div id="container">
    <a href="#info-mail" id="getInfo" onClick="return false;">Info mail</a>
</div>
<div id="container">
    <a href="#info-mail" id="getInfo" onClick="return false;">Info mail</a>
</div>

and the following js code (using jQuery):

$('#getInfo').click(function(){
    alert('test!');
});

example here

"Click" event fired only on first link element. But not on others.

I know that each ID in html page should be used only one time (but CLASS can be used a lot of times) - but it only should (not must) as I know. Is it the root of my problem?

TIA!

upd: Big thx to all for explanation!:)

Could you help me to understand - where I made the mistake. I have the following html code:

<div id="container">
    <a href="#info-mail.ru" id="getInfo" onClick="return false;">Info mail.ru</a>
</div>
<div id="container">
    <a href="#info-mail.com" id="getInfo" onClick="return false;">Info mail.com</a>
</div>
<div id="container">
    <a href="#info-mail.net" id="getInfo" onClick="return false;">Info mail.net</a>
</div>

and the following js code (using jQuery):

$('#getInfo').click(function(){
    alert('test!');
});

example here

"Click" event fired only on first link element. But not on others.

I know that each ID in html page should be used only one time (but CLASS can be used a lot of times) - but it only should (not must) as I know. Is it the root of my problem?

TIA!

upd: Big thx to all for explanation!:)

• javascript
• jquery

• 4 Do not reuse IDs. This is your problem. Use a class for this. – Jared Farrish Commented Oct 2, 2011 at 14:41
• 1 By definition, the id attribute must be unique. – Richard JP Le Guen Commented Oct 2, 2011 at 14:45
• so, it's not a recomendation (should), but the hard rule (must)? – Dmitry Belaventsev Commented Oct 2, 2011 at 14:48
• 1 It's a Bad Idea™ because you will get unexpected behavior in certain cases (like this one). ID attributes are meant to point to one element. Use it like this and you will not have any issues. Use CLASS attributes to group elements together. – Jared Farrish Commented Oct 2, 2011 at 14:49
• It says "must": whatwg.org/specs/web-apps/current-work/multipage/… – Šime Vidas Commented Oct 2, 2011 at 14:51

6 Answers 6

Use a class for this (and return false in your handler, not inline):

<div id="container">
    <a href="#info-mail.ru" class="getInfo">Info mail.ru</a>
</div>
<div id="container">
    <a href="#info-mail.com" class="getInfo">Info mail.com</a>
</div>
<div id="container">
    <a href="#info-mail.net" class="getInfo">Info mail.net</a>
</div>

$('.getInfo').click(function(){
    alert('test!');
    return false;
});

http://jsfiddle.net/Xde7K/2/

The reason you're having this problem is that elements are retrieved by ID using document.getElementById(), which can only return one element. So you only get one, whichever the browser decides to give you.

While you must, according to the W3 specifications, have only one element with a given id within any document, you can bypass this rule, and the issues arising from the consequences if document.getElementById(), if you're using jQuery, by using:

$('a[id="getInfo"]').click(function() {
    alert('test!');
    return false;
});

JS Fiddle demo.

But, please, don't. Respect the specs, they make everybody's life easier when they're followed. The above is a possibility, but using html correctly is much, much better for us all. And reduces the impact of any future changes within the browser engines, jQuery or JavaScript itself.

It must only be used once or it will be invalid so use a class instead, return false can also be added to your jQuery code as so: -

$('.getInfo').click(function(){
    alert('test!');

    return false;
});


<a href="#info-mail.net" **class**="getInfo" ....

First id's are for one element only, you should have same id for several divs.

you can make it class instead.

your example changed:

<div class="container">
    <a href="#info-mail.ru" class="getInfo" >Info mail.ru</a>
</div>
<div class="container">
    <a href="#info-mail.com" class="getInfo" >Info mail.com</a>
</div>
<div class="container">
    <a href="#info-mail.net" class="getInfo" >Info mail.net</a>
</div>


$('.getInfo').click(function(ev){
    ev.preventDefault();    //this is for canceling your code : onClick="return false;"
    alert('test!');
});

You can use the same id for several element (although the page won't validate), but then you can't use the id to find the elements.

The document.getElementById method only returns a single element for the given id, so if you would want to find the other elements you would have to loop through all elements and check their id.

The Sizzle engine that jQuery uses to find the elements for a selector uses the getElementById method to find the element when given a selector like #getInfo.

I know this is an old question and as everyone suggested, there should not be elements with duplicate IDs. But sometimes it cannot be helped as someone else may have written the HTML code.

For those cases, you can just expand the selector used to force jQuery to use querySelectorAll internally instead of getElementById. Here is a sample code to do so:

$('body #getInfo').click(function(){
    alert('test!');
});

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
  <div id="container">
      <a href="#info-mail.ru" id="getInfo" onClick="return false;">Info mail.ru</a>
  </div>
  <div id="container">
      <a href="#info-mail.com" id="getInfo" onClick="return false;">Info mail.com</a>
  </div>
  <div id="container">
      <a href="#info-mail.net" id="getInfo" onClick="return false;">Info mail.net</a>
  </div>
</body>

However as David Thomas said in his answer

But, please, don't. Respect the specs, they make everybody's life easier when they're followed. The above is a possibility, but using html correctly is much, much better for us all. And reduces the impact of any future changes within the browser engines, jQuery or JavaScript itself.