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

你能帮我理解 – 我犯了错误。 我有以下HTML代码：

 Info mail.ru 
 
 Info mail.com 
 
 Info mail.net  

和以下js代码（使用jQuery）：

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

这里的例子

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

我知道html页面中的每个ID应该只使用一次（但CLASS可以使用很多次） – 但它只应该 （不是必须 ），因为我知道。 这是我问题的根源吗？

TIA！

upd：大谢谢所有的解释！:)

Answer 1

为此使用一个类（并在处理程序中return false ，而不是内联）：

 
 Info mail.ru 
 
 Info mail.com 
 
 Info mail.net 
 $('.getInfo').click(function(){ alert('test!'); return false; }); 

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

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

Answer 2

虽然根据W3规范，您必须在任何文档中只有一个具有给定id的元素，但您可以绕过此规则，以及如果您使用jQuery，则document.getElementById()带来的后果问题，使用：

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

JS小提琴演示 。

但是 ，请不要 。 尊重规格，他们让每个人的生活更轻松。 以上是一种可能性，但正确使用html对我们所有人来说都要好得多。 并减少浏览器引擎，jQuery或JavaScript本身内任何未来变化的影响。

Answer 3

它必须只使用一次或者它将是无效的，所以使用类代替，返回false也可以添加到你的jQuery代码中，如下所示： –

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

Answer 4

第一个id仅适用于一个元素，对于几个div应该具有相同的id。

你可以改为上课。

您的示例已更改：

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

Answer 5

您可以为多个元素使用相同的id（尽管页面不会validation），但是您不能使用id来查找元素。

document.getElementById方法只返回给定id的单个元素，因此如果您想要查找其他元素，则必须遍历所有元素并检查其ID。

jQuery用于查找选择器元素的Sizzle引擎使用getElementById方法在给定像#getInfo这样的选择器时查找该元素。