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

【问题标题】：Can't fire click event on the elements with same id无法在具有相同 ID 的元素上触发点击事件
【发布时间】：2018-10-30 14:47:50
【问题描述】：

你能帮我理解一下 - 我在哪里犯了错误。我有以下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！

更新：非常感谢大家的解释！:)

【问题讨论】：

不要重复使用IDs。这是你的问题。为此使用一个类。
By definition, the id attribute must be unique.
所以，这不是推荐（应该），而是硬性规则（必须）？
It's a Bad Idea™ 因为在某些情况下会出现意外行为（例如这种情况）。 ID 属性意味着指向一个元素。像这样使用它，你不会有任何问题。使用CLASS 属性将元素组合在一起。
上面写着“必须”：whatwg.org/specs/web-apps/current-work/multipage/…

标签： javascript jquery

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

【讨论】：

【解决方案2】：

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

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

JS Fiddle demo.

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

【讨论】：

因为简单的$('#getInfo') 实现了原生的document.getElementById()（注意它是'Element'，而不是'Elements'），它被设计为遵守W3规范，并且只返回一个元素。使用[attribute="value"] 迭代页面中的所有a 元素并测试该属性实际上是否等于给定值。

【解决方案3】：

它只能被使用一次，否则它会失效，所以使用一个类来代替，return false 也可以像这样添加到你的 jQuery 代码中：-

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

    return false;
});


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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

当给定一个像#getInfo 这样的选择器时，jQuery 用来查找元素的 Sizzle 引擎使用 getElementById 方法来查找元素。

【讨论】：

为什么投反对票？如果你不解释你认为错的地方是什么，它就无法改进答案。

【解决方案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>

但是正如大卫托马斯在他的回答中所说的那样

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

【讨论】：