Jquery 插件 - 多个元素的 onclick 事件

Question

我正在创建一个 jQuery 插件，用于侦听具有相同 ID 名称的多个元素上的点击事件。

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

点击事件仅适用于多个 HTML 元素中的第一个。

我是如何初始化插件的：

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

如何让点击事件作用于所有带选择器的元素 #test-button？

JS Fiddle（简体）：

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 以独特的方式使用。只需使用 class 就可以了。

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();

Fiddle: https://jsfiddle.net/y9smmmpe/1/

但是你应该尽可能使用 class，这是 select 多个元素的方式。

Answer 4

IDs 必须是唯一的，您绝不能有多个具有相同 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 核心功能的插件：

要监听多个元素的点击事件，你只需要做：

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

Jquery 插件 - 多个元素的 onclick 事件

Jquery plugin - onclick event for multiple elements

javascript

jquery

onclick

jquery-plugins