Can't get the href value of an anchor tag with jQuery

Question

I'm trying to get the href value of an anchor tag using jQuery, but the this keyword is not working as expected.

Here is the result of the code in the console:

The part of the code I have problem with:

$('#container a').click(() => {
    console.log(this);
    let link = $(this).attr("href");
    console.log("from jquery - " + link);
    //chrome.tabs.create({ url: link });
});

As you can see, the this keyword is pointing on the window object. This code is part of an extension I'm trying to build for Opera.

this might help you. https://stackoverflow.com/questions/2098408/how-to-get-href-value-using-jquery — agDev, Jun 28 '18 at 17:12
Welcome to Stack Overflow. In order for people to better help you (and to help those that may come here in the future) you should add your relevant code here instead of posting a link to an image with code. — crazymatt, Jun 28 '18 at 17:13
This might help you too https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-on-so-when-asking-a-question#answer-285557 — Emeeus, Jun 28 '18 at 17:18

user7637745 · Accepted Answer · 2018-06-29T09:32:30.303

2

You are using an arrow function () => {..} instead of a regular function function () {...}, that's why your this didn't work as you've expected.

So instead of this:

$('#container a').click(() => { ... });

Use this:

$('#container a').click(function() { ... });

Your updated code:

$('#container a').click(function () {
    console.log(this);
    let link = $(this).attr('href');
    console.log(link);
})

OR with an arrow function:

$('container a').click(event => {
    let link = $(event.currentTarget).attr('href');
    console.log(link);
})

More on arrow functions:

edited Jun 29 '18 at 09:32

answered Jun 28 '18 at 17:17

user7637745

965
2
14
27

You're welcome! Which implementation worked the best for you? – user7637745 Jun 28 '18 at 17:53
1

the one with the function syntax , i really need to read more about the lambda expression, the behavior of it is different from the one i used to – Jun 28 '18 at 17:57
Nice! **I updated my answer with some useful links** to help you to fully grasp arrow functions in JavaScript. Have fun and keep up the good work! – user7637745 Jun 28 '18 at 18:06

score 1 · Answer 2 · edited Jun 29 '18 at 10:11

1

This will give you the href value

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

Here is a sample to test here:

$(document).ready(function() {
  $("a").click(function(event) {
    var href = $(event.target).attr('href'); //this will give you the href value
    alert(href);
    event.preventDefault();
  });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<a href="I'm the href value">this is a test link, click me</a>

edited Jun 29 '18 at 10:11

Ivan

34,531
8
55
100

answered Jun 28 '18 at 17:15

agDev

855
10
20

the problem is when i use the arrow function the 'this' keyword' point to the window object not the tag that fired the event. i fixed it, thank you for your answer – Jun 28 '18 at 17:54
this works well until there is more than 1 a in the page. – Liora Haydont Jun 28 '18 at 18:16
the point of my answer was to demonstrate how to get attr value with jquery since this is the title of the question. – agDev Jun 28 '18 at 18:23
I updated the answer to take the element from the event. so this will work even if there are multiple of the same element – agDev Jun 28 '18 at 18:27

score 0 · Answer 3 · edited Jun 29 '18 at 10:14

0

Don't use the arrow function (() => {}) use classic function declaration (function() {}). Arrow functions don't bind this to the current scope.

$("#container a").click(function(){
    console.log(this);
    let link = $(this).attr("href");
    console.log(link);
})

You can learn more about arrow functions here.

edited Jun 29 '18 at 10:14

Ivan

34,531
8
55
100

answered Jun 28 '18 at 17:17

Karan

12,059
3
24
40

Can't get the href value of an anchor tag with jQuery

3 Answers3