Question

How do you add a jquery click event handler for a bunch of links within a div? For example:

<div class="test">
<a href="test1.html">link 1</a>
<a href="test2.html">link 2</a>
<a href="test3.html">link 3</a>
</div>

I’d like to add a click event handler for each of the three links, so I can addClass(‘selected’) to the link that was clicked on and removeClass(‘selected’) from the rest.

I know I can do them one by one, but I was wondering what the cleanest way to do this is…

Answer 1

I would use .delegate():

var classname = 'selected';

$('div.test').delegate('a', 'click', function ()
{
    $(this).addClass(classname).siblings().removeClass(classname);
});