JQuery - how to determine which link was clicked

Question

I have a simple PHP snippet that 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 in 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 is clicked (Click here to see the data), it should add the contents of test15.php between the two DIV tags.

 #Test15.php <?php $dbG = $_GET['dbG']; $SlID = $_GET['SlID']; print $dbG . " & " . $SlID; ?> 

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

Hope I made it clear enough. I'm sure there should be an easy way, but I am completely new to Javascript / jQuery.

Answer 1

Not sure if I fully understand what you're facing, but here's how I 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 tied to each p tag. Instead, with each p tag, we store the required data , i.e. dbg and slid .

The click handler then attaches once to document ready . jQuery abstracts across various browsers and passes an event object to its handlers as its first parameter. Then this object can be used to search for the element on which the event occurred. See http://api.jquery.com/on/

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

Answer 2

As Brian said, you can simply put the same class on all your links and use the $(this) in jQuery inside the click function to find out which link was clicked.

Here's a basic example of changing the colors of links to 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'); }); }); 

Answer 3

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 4

Add the full URL of your link (or p in this case) using the 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 that you have direct access to the specified link:

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