CODEWITHSUNDEEP
javascriptjquery
Dmitry Belaventsev
Dmitry Belaventsev

Reputation: 6657

Can't fire click event on the elements with same id

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!:)

Upvotes: 5

Views: 8520

Answers (6)

Aayush Sharma
Aayush Sharma

Reputation: 839

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.

Upvotes: 0

Guffa
Guffa

Reputation: 700212

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.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 4

user975475
user975475

Reputation:

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!');
});

Upvotes: 1

KryptoniteDove
KryptoniteDove

Reputation: 1268

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" ....

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49188

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.

Upvotes: 11

Related Questions