204

I'm trying to get href value using jQuery:

<html>
    <head>
        <title>Jquery Test</title>
         <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("a").click(function(event) {
                alert("As you can see, the link no longer took you to jquery.com");
                var href = $('a').attr('href');
                alert(href);
                event.preventDefault();
            });
        });
        </script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>
    </body>
</html>

But it doesn't work. Why?

3
  • Care to tell us what exactly didn't work? was the alert empty? did you even get 2 alerts? Any js errors? It's working for me...
    – Ben Rowe
    Jan 20, 2010 at 1:45
  • upss ..., sorry. the problem is clear cache Jan 20, 2010 at 2:22
  • Fiddle here: jsfiddle.net/LijoCheeran/t1xs4wo7
    – LCJ
    May 5, 2018 at 5:11

8 Answers 8

431

You need

var href = $(this).attr('href');

Inside a jQuery click handler, the this object refers to the element clicked, whereas in your case you're always getting the href for the first <a> on the page. This, incidentally, is why your example works but your real code doesn't

18

You can get current href value by this code:

$(this).attr("href");

To get href value by ID

$("#mylink").attr("href");
15

It's worth mentioning that

$('a').attr('href'); // gets the actual value
$('a').prop('href'); // gets the full URL always
2

It works... Tested in IE8 (don't forget to allow javascript to run if you're testing the file from your computer) and chrome.

1
  • Chrome can suppress the second popup depending on your settings, were you testing in chrome? If so, comment out your first alert and it will work. Jan 20, 2010 at 1:20
2

if the page have one <a> It Works,but,many <a> ,have to use var href = $(this).attr('href');

1
  • 1
    gives undefined output Jan 17, 2020 at 10:23
2

Assuming you have this html :

   <a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>

You can get and display the href attribute with this JS snippet :

<script>
    $(".linkClass").click(function() {
        alert($(this).attr("href"));
    });
</script>
0
**Replacing  href attribut value to other** 
 
 <div class="cpt">
   <a href="/ref/ref/testone.html">testoneLink</a>
 </div>

  <div class="test" >
      <a href="/ref/ref/testtwo.html">testtwoLInk</a>
  </div>

 <!--Remove first default Link from href attribut -->
<script>
     Remove first default Link from href attribut
    $(".cpt a").removeAttr("href");
    
    Add  Link to same href attribut
    var testurl= $(".test").find("a").attr("href");
    $(".test a").attr('href', testurl);
</script>
0

If your html link is like this:

<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>

Then you can access the href in jquery as given below (there is no need to use "a" in href for this)

$(".linkClass").on("click",accesshref);

function accesshref()
 {
 var url = $(".linkClass").attr("href");
 //OR
 var url = $(this).attr("href");
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.