[jquery] How to get the clicked link's href with jquery?

Does anyone know how can I get the clicked link's href with jquery? I have the link as following:

    <a  href="ID=1" class="testClick">Test1.</a>
    <br />
    <a  href="ID=2" class="testClick">Test2.</a>
    <br />
    <a  href="ID=3" class="testClick">Test3.</a>

I wrote a code as following to get the href value from the link I clicked on. But somehow this is always return me the 1st link's href (ID=1) even though I clicked on Test2 or Test3. Does anyone know what is it going on here? and how can I solve this issue?

    $(".testClick").click(function () {
        var value = $(".testClick").attr("href");
        alert(value );
    });

This question is related to jquery

The answer is


this in your callback function refers to the clicked element.

   $(".addressClick").click(function () {
        var addressValue = $(this).attr("href");
        alert(addressValue );
    });

$(".testClick").click(function () {
         var value = $(this).attr("href");
         alert(value );     
}); 

When you use $(".className") you are getting the set of all elements that have that class. Then when you call attr it simply returns the value of the first item in the collection.


Suppose we have three anchor tags like ,

<a  href="ID=1" class="testClick">Test1.</a>
<br />
<a  href="ID=2" class="testClick">Test2.</a>
<br />
<a  href="ID=3" class="testClick">Test3.</a>

now in script

$(".testClick").click(function () {
        var anchorValue= $(this).attr("href");
        alert(anchorValue);
});

use this keyword instead of className (testClick)


You're looking for $(this).attr("href");