How to get anchor text/href on click using jQuery?

JqueryAnchor

Jquery Problem Overview


Consider I have an anchor which looks like this

 <div class="res">
     <a href="~/Resumes/Resumes1271354404687.docx">
         ~/Resumes/Resumes1271354404687.docx
     </a>
 </div>

NOTE: There won't be any id or class for the anchor...

I want to get either href/text in the jQuery onclick of that anchor.

Jquery Solutions


Solution 1 - Jquery

Note: Apply the class info_link to any link you want to get the info from.

<a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
    ~/Resumes/Resumes1271354404687.docx
</a>

For href:

$(function(){
  $('.info_link').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

For Text:

$(function(){
  $('.info_link').click(function(){
    alert($(this).text());
  });
});

.

Update Based On Question Edit

You can get them like this now:

For href:

$(function(){
  $('div.res a').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

For Text:

$(function(){
  $('div.res a').click(function(){
    alert($(this).text());
  });
});

Solution 2 - Jquery

Edited to reflect update to question

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});

Solution 3 - Jquery

##Without jQuery:

You don't need jQuery when it is so simple to do this using pure JavaScript. Here are two options:

  • Method 1 - Retrieve the exact value of the href attribute:

Select the element and then use the .getAttribute() method.

This method does not return the full URL, instead it retrieves the exact value of the href attribute.

var anchor = document.querySelector('a'),
    url = anchor.getAttribute('href');

alert(url);

<a href="/relative/path.html"></a>


  • Method 2 - Retrieve the full URL path:

Select the element and then simply access the href property.

This method returns the full URL path.

In this case: http://stacksnippets.net/relative/path.html.

var anchor = document.querySelector('a'),
    url = anchor.href;

alert(url);

<a href="/relative/path.html"></a>


As your title implies, you want to get the href value on click. Simply select an element, add a click event listener and then return the href value using either of the aforementioned methods.

var anchor = document.querySelector('a'),
    button = document.getElementById('getURL'),
    url = anchor.href;

button.addEventListener('click', function (e) {
  alert(url);
});

<button id="getURL">Click me!</button>
<a href="/relative/path.html"></a>

Solution 4 - Jquery

Updated code

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});

Solution 5 - Jquery

#Alternative

Using the example from Sarfraz above.

<div class="res">
    <a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
        ~/Resumes/Resumes1271354404687.docx
    </a>
</div>

###For href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});

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
QuestionACPView Question on Stackoverflow
Solution 1 - JquerySarfrazView Answer on Stackoverflow
Solution 2 - JqueryGlenCrawfordView Answer on Stackoverflow
Solution 3 - JqueryJosh CrozierView Answer on Stackoverflow
Solution 4 - JqueryrahulView Answer on Stackoverflow
Solution 5 - JqueryJacob AshcraftView Answer on Stackoverflow