Question

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

<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对象，因此您无法在其上调用jQuery的click方法。

相反，您应该调用eq方法，该方法返回包含原始集合中单个元素的jQuery对象。

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

Answer 2

有可能。

然而，这一行：

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

不行。它应该是：

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

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

http://api.jquery.com/eq

Answer 3

是的，您可以在对象上有多个点击事件。处理程序将按添加顺序调用（除非你在其中一个中说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/

一个元素上的多个单击事件

4 个答案: