无法触发具有相同编号的元素上的点击事件

您能否帮助我理解 - 我在哪里犯了错误。我有以下的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

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

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

TIA！

UPD：大THX一切为了解释:)

来源

2011-10-02 dizpers

不要重复使用“ID”。这是你的问题。为此使用一个班级。 –

[根据定义，id属性必须是唯一的。]（http://www.w3.org/TR/html4/struct/global.html#adef-id） –

所以，这不是一个推荐（应该），但硬规则（必须）？ – dizpers

使用（在你的处理器和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()检索元素，它只能返回一个元素。所以你只能得到一个，无论浏览器决定给你。

来源

2011-10-02 14:43:49

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

document.getElementById方法只为给定的id返回一个元素，所以如果你想查找其他元素，你必须遍历所有元素并检查它们的id。

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

来源

2011-10-02 14:44:19 Guffa

为什么downvote？如果你不解释你认为什么是错的，它不能改善答案。 – Guffa

它只能使用一次，否则将无效，所以使用一个类来代替，返回false也可以添加到您的jQuery代码像这样： -

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

    return false; 
}); 


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

来源

2011-10-02 14:44:34 KryptoniteDove

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

来源

2011-10-02 14:47:37

虽然你必须，根据W3的规格，与任何文档中给定的ID只有一个元素，就可以绕过这个规则，并且这些问题从由此产生的后果，如果document.getElementById()，如果你使用jQuery，通过使用：

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

JS Fiddle demo。

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

来源

2011-10-02 14:55:32

hm，它为什么有效（当简单$（'＃getInfo'）不）时？ – dizpers

由于简单的$（'＃getInfo'）'实现了原生的'document.getElementById（）'（注意它是'Element'，而不是'Elements'），它被设计为遵守W3规范，并且仅返回*一个*元素。使用['[attribute =“value”]']（http://api.jquery.com/attribute-equals-selector/）迭代页面中的所有'a'元素并测试属性是否在事实上，等于给定的价值。 –

无法触发具有相同编号的元素上的点击事件

回答

相关问题