CODEWITHSUNDEEP
jquery
JasonGenX
JasonGenX

Reputation: 5434

How do I tell which Anchor was clicked using JQuery?

I have a div with two links:

<div id="copyrightFooter">
    <p>Copyright &copy; 2011 MY Company, LLC. All rights reserved. please review our 
        <a  id="privacyPolicy" style="color: #9DB2E7;font-weight:bold" href="#">Privacy Policy</a> and our <a id="terms" style="color: #9DB2E7;font-weight:bold" href="#">Terms of Use</a>
    </p>
</div> <!-- copyrightFooter-->

I am currently capturing the clicks on those two links with JQuery:

jQuery(function ($) {
    // Load dialog on page load

    // Load dialog on click
    $('#copyrightFooter a ').click(function (e) {
        $('#basic-modal-content').modal();
        return false;
    });

});

problem is, this code works for BOTH links. I'd like to "switch/case" which ID i've clicked on so that I can modal-dialog a different DIV. Nothing I do works? "alerting" the ID brings back "undefined" or something similar, so switch case doesn't work. What am I doing wrong?

Upvotes: 2

Views: 111

Answers (6)

Ariful Islam
Ariful Islam

Reputation: 970

You can check the id like this:

$('#copyrightFooter a ').click(function (e) {
    if(this.id=="privacyPolicy"){
        ..
    }
    else{
        ..
    }
});

Upvotes: 0

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

You could do:

$('#copyrightFooter a ').click(function (e) {
    var id = $(this).attr("id");
    switch(id){
        case "privacyPolicy": 
            ... 
           break;  
        case "terms": 
           ... 
           break;
    }        
    return false;
});

Hope this helps. Cheers

Upvotes: 0

Dejan Marjanović
Dejan Marjanović

Reputation: 19380

$('#copyrightFooter a').click(function (e) {

    switch($(this).attr('id')){
        case 'privacyPolicy': id = '#basic-modal-content'; break;
        case 'terms': id = '#basic-modal-content'; break;
    }

    $(id).modal();
    return false;

});

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

jQuery(function ($) {
    // Load dialog on page load

    // Load dialog on click
    $('#copyrightFooter a ').click(function (e) {
        if($(this).attr("id") == "privacyPolicy")
        {
            alert("display Modal 1");
        }else  if($(this).attr("id") == "terms"){
          alert("display Modal 2");
        }

        return false;
    });

});

Use $(this).attr("id"); to get the id of div you clicked.

Here is a working example: http://jsfiddle.net/HPsgE/

Upvotes: 1

James Allardice
James Allardice

Reputation: 165961

Using this in the event handler function will give you a reference to the clicked element. For example, to get the id of the clicked element you can do:

$('#copyrightFooter a ').click(function (e) {
    var clickedID = this.id;
});

You could also use jQuery's $(this).attr("id");, but there's no need to overuse jQuery when a simple pure JavaScript statement will suffice.

Upvotes: 1

Thorsten
Thorsten

Reputation: 5644

$('#copyrightFooter a ').click(function (e) {
    alert($(this).attr('id'));
});

Should work fine.

Upvotes: 1

Related Questions