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

Jquery

Jquery Problem Overview


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

Jquery Solutions


Solution 1 - Jquery

this in your callback function refers to the clicked element.

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

Solution 2 - Jquery

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

Solution 3 - Jquery

$(".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.

Solution 4 - Jquery

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)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJin YongView Question on Stackoverflow
Solution 1 - JqueryDaffView Answer on Stackoverflow
Solution 2 - JqueryMattView Answer on Stackoverflow
Solution 3 - JqueryPaulView Answer on Stackoverflow
Solution 4 - Jqueryvishal ribdiyaView Answer on Stackoverflow