javascript - 无法在具有相同 ID 的元素上触发点击事件

Question

你能帮我理解 - 我在哪里犯了错误吗？我有以下 html 代码:

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

和以下 js 代码(使用 jQuery):

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

example here

“单击”事件仅在第一个链接元素上触发。但对其他人则不然。

我知道 html 页面中的每个 ID 应该只使用一次(但是 CLASS 可以使用很多次) - 但它只 应该(不是必须)据我所知。这是我问题的根源吗？

TIA!

upd:非常感谢大家的解释!:)

Answer 1

为此使用一个类(并在您的处理程序中返回 false，而不是内联):

<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/

您遇到此问题的原因是元素是通过 ID 使用 document.getElementById() 检索的，它只能返回一个元素。所以你只能得到一个，无论浏览器决定给你什么。