jQuery插件-多個元素的onclick事件

Question

我正在創建一個jQuery插件，用於偵聽具有相同ID名稱的多個元素上的單擊事件。

// On click listener
base.$el.click(function (event) {
    event.preventDefault(); 
    alert("clicked!");
});    

click事件僅對多個HTML元素中的第一個起作用。

我如何初始化插件：

$('#test-button').scrollTo();

如何使用選擇器#test-button使click事件對所有元素起作用？

JS小提琴（簡體）：

https://jsfiddle.net/8ujeqwey/2/

請注意，僅當您單擊按鈕一時警報才會顯示。 它應該可以在所有按鈕上使用。

Answer 1

ID在每個文檔上下文中必須唯一。請改用classes ，

<a href="#" class="test">One</a>
<a href="#" class="test">Two</a>
<a href="#" class="test">Three</a>

$('.test').scrollTo();

Example

Answer 2

ID以獨特的方式使用。 只需使用一個類代替，它應該可以工作。

Answer 3

如上所述，ID在范圍內必須唯一。 如果您的插件的設計是要收集具有特定ID的多個元素，則可以對具有所需ID的元素進行范圍划分（盡管技術上無效的HTML標記仍然可以使用）：

<div class="content">
    <a href="#" id="test">One</a>
</div>
<div class="content">
    <a href="#" id="test">Two</a>
</div>
<div class="content">
    <a href="#" id="test">Three</a>
</div>

$('.content #test').scrollTo();

小提琴： https : //jsfiddle.net/y9smmmpe/1/

但是您應該盡可能使用一個類，這是選擇多個元素的方式。

Answer 4

ID必須是唯一的，並且每個ID不得超過一個。

改用一個class ：

<a href="#" class="test">One</a>
<a href="#" class="test">Two</a>
<a href="#" class="test">Three</a>

然后是JQ： $('.test').scrollTo();

和CSS： .test{/*your css here*/ }

但是，根據您的具體問題，似乎您正在嘗試創建一個已經是JQ核心功能的插件：

要監聽多個元素上的click事件，只需執行以下操作：

$('.elementClassHere').on('click', function(){ //your function here.. });