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

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

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

TIA！

更新：大谢谢所有人的解释！:)

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()检索元素，{{1}}只返回一个元素。所以你只能得到一个，无论浏览器决定给你什么。

Answer 2

当您必须时，根据W3规范，在任何文档中只有一个具有给定ID的元素，您可以绕过此规则，以及由此产生的问题如果你使用jQuery，document.getElementById()的后果是：

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

JS Fiddle demo

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

Answer 3

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

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

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

Answer 4

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

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

    return false;
});


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

Answer 5

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

你可以改为上课。

您的示例已更改：

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

Answer 6

我知道这是一个古老的问题，正如每个人都建议的那样，不应有具有重复ID的元素。但是有时它可能无济于事，因为其他人可能已经编写了HTML代码。

对于这些情况，您可以扩展用于迫使jQuery在内部使用querySelectorAll而不是getElementById的选择器。这是执行此操作的示例代码：

$('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>

但是，大卫·托马斯（David Thomas）在回答中说

但是，请不要。遵守规范，遵循这些规范可使每个人的生活更轻松。以上是可能的，但是正确使用html对我们所有人来说要好得多。并减少浏览器引擎，jQuery或JavaScript本身将来发生任何更改的影响。

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

6 个答案: