jQuery - how to determine which link was clicked

Question

I have a simple piece of PHP which generates n copies of the following code:

Answer 1

Add the complete URL to your link (or p in this case) using a data attribute:

<p class="ShowSDB_L2" class="center" data-loadurl="test15.php?dbG=<?php echo $dbG; ?>&SlID=<?php echo $SlID; ?>">Click Here to See Data</p> 

<div class="divSDB_L2"></div>

Then do all the binding directly in your jQuery so you have direct access to the link that was clicked:

$(document).ready(function() {
    $('.ShowSDB_L2').on('click', function(e) {
        e.preventDefault();
        $('.divSDB_L2').empty().load($(this).data('loadurl')).show();
    });
});

Answer 2

Here is a cross-browser way to find the element (target) that triggered the event (e):

function getTarget(e){
// non-ie or ie?
e=e||window.event;
return (e.target||e.srcElement);
};

Answer 3

Am not sure I fully understand what it is you are having difficulty with, but the following is how I would do it.

<p class="ShowSDB_L2" class="center" data-dbg="<?php print dbG;?>" data-slid="<?php print $sLID;?>">Click Here to See Data</p>   
<div class="divSDB_L2"></div>

$(document).ready(function() {
    $(document).on('click', 'p.ShowSDB_L2', function(evt) {
        var $p = $(evt.currentTarget),
            dbG = $p.data('dbg'),
            slid = $p.data('slid'),
            $div = $p.next();

        FSD_L2(dbG, slid, $div);
    });
});

function FSD_L2(dbG, SlID, $div)
{
    $div.load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}

The click handler is not hardcoded to each p tag. Instead with each p tag we store the required data, ie dbg & slid.

The click handler is then attached once at document ready. jQuery abstracts over the various browsers and passes to its handlers the event object as its first parameter. This object can then be used to find the element on which the event occurred. Refer: http://api.jquery.com/on/

Finally, we fetch the required data from the clicked element, find the div that needs to be updated and then call your custom function.

Answer 4

Like Brian said, you could just put the same class on all of your links and use the $(this) keyword in jQuery inside of a click function to find out which link was clicked.

Here's a basic example of changing link colors on a nav using this technique: http://jsfiddle.net/9E7WW/

HTML:

<a class="nav">Test</a>
<a class="nav">Test2</a>
<a class="nav">Test3</a>
<a class="nav">Test4</a>

Javascript:

$(document).ready(function(){
    $('.nav').click(function(){
        // change all to black, then change the one I clicked to red
       $('.nav').css('color', 'black');
        $(this).css('color', 'red');
    });
});