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

I'm creating a jQuery plugin that listens to click events on multiple elements that have the same ID name.

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

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

The click event works only on the first of multiple HTML elements.

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

How I'm initializing the plugin:

我是如何初始化插件的:

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

How can I make the click event work on all elements with selector #test-button?

如何使用选择器#test-button使click事件适用于所有元素?

JS Fiddle (simplified):

JS Fiddle(简化):

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

Notice how the alert shows only when you click button one. It should work on all buttons.

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

4 个解决方案

#1

ID must be unique on each document context., use classes instead,

ID必须在每个文档上下文中都是唯一的。使用类来代替,

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

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

Example

#2

ID's are used in a unique way. Just use a class instead and it should work.

ID以独特的方式使用。只需使用一个类,它应该工作。

#3

As mentioned, IDs must be unique within a scope. If the design of your plugin is to harvest multiple elements with a specific ID, you could do it if the elements with the desired ID were scoped (although technically invalid HTML markup, it still works):

如上所述,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/

But you should use a class if possible, that's the way to select multiple elements.

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

#4

IDs must be unique, you must never have more than one element with the same ID.

ID必须是唯一的,您必须永远不要有多个具有相同ID的元素。

Use a class instead:

改为使用类:

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

And the JQ: $('.test').scrollTo();

而JQ:$('。test')。scrollTo();

And css: .test{/*your css here*/ }

并且css:.test {/ *你的css在这里* /}

Though, according to your question specifically, it seems you're trying to create a plugin that is already a core functionality of JQ:

虽然,根据您的具体问题,似乎您正在尝试创建一个已经是JQ核心功能的插件:

To listen to click event on multiple elements, you just do:

要在多个元素上收听点击事件,您只需执行以下操作:

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

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

#1