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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jul 25, 2013 at 15:44 IGGtIGGt 2,7891010 gold badges4545 silver badges6767 bronze badges 2

• 2 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 Commented Jul 25, 2013 at 15:49
• @downvoter, Why the down vote for this question? – Amith George Commented Jul 25, 2013 at 16:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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/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');
    });
});

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./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.

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

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