一个元素上的多次点击事件

Question

http://jsfiddle.net/rHVcX/1/

使用不同的选择器时，一个元素是否可以有多个点击事件？

<button id="test" class="testclass">test</button>
<button id="test2" class="testclass2">test 2</button>

//only B
$('.testclass')[0].click(function(){alert('A');});
$('#test').click(function(){alert('B');});

// A and B
$('#test2').click(function(){alert('A2');});
$('#test2').click(function(){alert('B2');});

Answer 1

是的，这是完全可能的。

但是，您误用了 jQuery。
编写$(...)[0]会为您提供集合中的第一个原始 DOM 元素。
它不是 jQuery object，所以不能在上面调用 jQuery 的click方法。

相反，您应该调用eq方法，该方法返回一个 jQuery object ，其中包含来自原始集合的单个元素。

将其更改为$('.testclass').eq(0).click(...)

Answer 2

有可能的。

但是，这一行：

$('.testclass')[0].click(function(){alert('A');});

不管用。 它应该是：

$('.testclass').eq(0).click(function(){alert('A');});

索引 jQuery object 将为您提供索引为零的 DOM 元素，而不是过滤的 jQuery ZA8CFDE6331BD59EB66AC96F8911C。

http://api.jquery.com/eq

Answer 3

是的，您可以在 object 上进行多次点击事件。 处理程序将按照它们被添加的顺序被调用（除非你说在其中一个中return false ）。

Answer 4

删除[0]或将其更改为.eq(0)

<button id="test" class="testclass">test</button>
<button id="test2" class="testclass2">test 2</button>

//only B
$('.testclass').click(function(){alert('A');});
$('#test').click(function(){alert('B');});

// A and B
$('#test2').click(function(){alert('A2');});
$('#test2').click(function(){alert('B2');});

工作小提琴

http://jsfiddle.net/rHVcX/2/