Could you please suggest me how to handle multiple anchor tags for click functionality?

My code is like :

<a id="test1" href="#" >test1</a>
<a id="test2" href="#" >test2</a>

My jQuery functionality is :

$('a').click(function(event) {
    alert('click');
});

The jQuery click functionality works for all anchor tags, but I want to differentiate the jQuery functionality based on id attribute ..

Could you please suggest me how to handle multiple anchor tags for click functionality?

My code is like :

<a id="test1" href="#" >test1</a>
<a id="test2" href="#" >test2</a>

My jQuery functionality is :

$('a').click(function(event) {
    alert('click');
});

The jQuery click functionality works for all anchor tags, but I want to differentiate the jQuery functionality based on id attribute ..

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Feb 7, 2017 at 21:54 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Sep 28, 2011 at 9:21 RavichandraRavichandra 1,26077 gold badges2323 silver badges3838 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

Look at the id on this and make an if statement or a switch (switch is remended):

$('a').click(function(event) {
    switch(this.id) {
        case 'test1':
            alert('link with an id of test1!');
            event.preventDefault();
            break;
        case 'test2':
            alert('link with an id of test2!');
            event.preventDefault();
            break;
        default:
            //Default behavior
    }
});

You want to do something different depending on the ID?

You could do something like

$('a').click(function(e){
    var id = $(this).attr('id');
    // switch depending on id
});

OR

$('#test1').click(function(e){ alert("you clicked test1"); });
$('#test2').click(function(e){ alert("you clicked test2"); });

But this wouldn't be very nice if you are then going to add multiple's to do the same thing.

You can get the id attribute.

$('a').click(function(event) {
    alert($(this).attr('id')+' clicked!');
});

you can read the id of the element and depending on the id make your functions

$('a').click(function(event) {
    if ($(this).attr("id") == 'test1')
    {
        alert('Test 1 was clicked');
    }
    else if ($(this).attr("id") == 'test2')
    {
        alert('Test 2 was clicked');
    }
});

If you want to bind to an element based on id:

$('#test1').click(function(event) {
   alert('test1 clicked');
});

This is my approach

$('a').click(
    function()
    {
        switch($(this).attr('id'))
        {
            case 'test1':
                // Do some work
                break;
            case 'test2':
                // Do some work
                break;
        }
    }
);

You can look at the id as suggested in the other answers but you can also attach data attributes on each tag with a custom data attribute (html5) or use the href, that can later be accessed from the onclick event (html5).

sample:

<a id="test1" data-my-custom-data="Insert" data-row-id="24" href="#" >test1</a>
<a id="test2" href="Insert" >test2</a>

$("a").click(function(event)
{
    alert($(this).attr("data-my-custom-data"));
    alert($(this).attr("data-row-id"));
    alert($(this).attr("href"));

    event.preventDefault(); // To avoid browsing to href...
});