/

Is it possible to have multiple click events on one elements, when using different selectors?

<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');});

http://jsfiddle/rHVcX/1/

Is it possible to have multiple click events on one elements, when using different selectors?

<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');});

• javascript
• jquery

Share Improve this question Follow asked Aug 12, 2011 at 14:32 Björn RådströmBjörn Rådström 2311 silver badge33 bronze badges 1

• $('.testclass')[0] will give you the DOM element, not a jQuery object. It should be $('.testclass').eq(0) or just $('.testclass'). – Felix Kling Commented Aug 12, 2011 at 14:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Yes, that's perfectly possible.

However, you're misusing jQuery.
Writing $(...)[0] gives you the first raw DOM element in the set.
It isn't a jQuery object, so you can't call jQuery's click method on it.

Instead, you should call the eq method, which returns a jQuery object containing a single element from the original set.

Change it to $('.testclass').eq(0).click(...)

It is possible.

However, this line:

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

Will not work. It should be:

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

Indexing the jQuery object will give you the DOM element at index zero, not a filtered jQuery object.

http://api.jquery./eq

Yes you can have multiple click events on the object. The handlers wil be called in the order they were added (unless you say return false in one of them).

remove [0] or change it to .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');});

working fiddle

http://jsfiddle/rHVcX/2/