無法觸發具有相同編號的元素上的點擊事件

您能否幫助我理解 - 我在哪裏犯了錯誤。我有以下的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'元素並測試屬性是否在事實上，等於給定的價值。 –

無法觸發具有相同編號的元素上的點擊事件

回答

相關問題