无法在具有相同ID的元素上触发click事件

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

这里的例子

"Click"事件仅在第一个链接元素上触发.但不是其他人.

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

TIA!

upd:大谢谢所有的解释!:)

Answer 1

为此使用一个类(并return 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(),这只能返回一个元素.所以你只能得到一个,无论浏览器决定给你什么.