Question

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

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

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

我如何初始化插件：

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

如何使用选择器#test-button？

使点击事件适用于所有元素

JS Fiddle（简化）：

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

请注意仅当您单击按钮1时警报才会显示。它应该适用于所有按钮。

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在范围内必须是唯一的。如果插件的设计是为了获取具有特定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/

但是如果可能的话，你应该使用一个类，这是选择多个元素的方法。

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

2 个答案: