jQuery - how to determine which link was clicked

Question

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

<p class="ShowSDB_L2" class="center" onClick="FSD_L2('<?php print dbG;?>','<?php print $sLID;?>')">Click Here to See Data</p>   
<div class="divSDB_L2">
</div>

It is generated using PHP, so the number of copies is unknown up front.

On another page I have the following Javascript (using jQuery)

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

When the text above (Click Here to See Data) is clicked, it should add the contents of test15.php between the the two DIV tags.

#Test15.php
<?php
$dbG = $_GET['dbG'];
$SlID = $_GET['SlID'];

print $dbG . " & " . $SlID;
?>

The problem I have is how to determine which of the links was clicked? At present, if I have three copies, and click one, all three copies are activated.

I hope I have made this clear enough. I'm sure there must be a simple way, but I'm quite new to Javascript/jQuery.

just heading out, but you could assign a click to all items of the class 'centre'.... $('.centre').click(){ // do stuff }); inside here you can use $(this) to refere to the item clicked on. — Brian, Jul 25 '13 at 15:49

score 3 · Answer 1 · answered Jul 25 '13 at 15:54

3

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

answered Jul 25 '13 at 15:54

Joe_G

906
6
9

Thanks, but with this option how would I pass the variables dbG and SlID into the javascript, as these are needed for the output? – IGGt Jul 25 '13 at 16:20
Similar to what Amith George did, you can use $(this).data('dbg') to get the string value of your dbg data. If you don't want to split them up you can use ponysmith's approach and put all the data into one url, then in jQuery use $(this).data('loadurl') to get the entire string. Here's an example: http://jsfiddle.net/Zmaad/ – Joe_G Jul 25 '13 at 16:40

score 2 · Accepted Answer · answered Jul 25 '13 at 16:00

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.

Thanks, it took me a while to get my head round it, but I think I understand how it works. And I've tested it and it works really well. — IGGt, Jul 26 '13 at 07:53

score 1 · Answer 3 · answered Jul 25 '13 at 15:56

1

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

answered Jul 25 '13 at 15:56

Christophe

27,383
28
97
140

score 1 · Answer 4 · answered Jul 25 '13 at 15:58

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

answered Jul 25 '13 at 15:58

ponysmith

427
2
4

thanks, but I am getting an "Uncaught Error: Syntax error, unrecognized expression: " with this? – IGGt Jul 25 '13 at 16:21
I get no errors when I try it locally. Try logging the value of `$(this).data('loadurl')` to the console to make sure you don't have a stray character coming through from the PHP – ponysmith Jul 25 '13 at 16:49
cheers, It seems I was using an old copy of jQuery.js Once I updated this I stopped getting the error. But When I have multiple copies of the `
Click Here...
` and click one, it activates all of them, not just the one that was clicked. – IGGt Jul 26 '13 at 07:50

jQuery - how to determine which link was clicked

4 Answers4

Linked