setting href value to javascript variable on click

Question

I am trying to get the href value passed to a variable when the user clicks on the link from a particular class. This is what I have right now.

$(document).on('click',"a.show-notes",function{
    var $url = $(this).attr("href");
)};

This is not working for me though, and no value is being passed to the variable. I have also tried something like this, with no luck...

$("a.show-notes").on('click',function(){
    var $url = $(this).attr("href");
)};

I imagine that there is something obvious here that I am missing, but I've been starring at it for so long that my mind is fried.

The first code is a syntax error, the second should work as long as the element is static. Where are you trying to use this variable ? — adeneo
– adeneo, Commented May 8, 2014 at 20:36
Could you please try ".show-notes a" it will fix the code I think... — Rodrigo Pereira
– Rodrigo Pereira, Commented May 8, 2014 at 20:36
You're declaring "$url" inside the function, so it's local to that function. It'll be un-seeable outside the function. — Pointy
– Pointy, Commented May 8, 2014 at 20:36
Okay, there must be something else going on here. Does attr("href") return what is hard coded? My href is being generated by an embedded ruby variable. I wasn't thinking that this could be the issue though, because when I check the source code or inspect the link in my browser, I am seeing the desired href, of course. — user3468711
– user3468711, Commented May 8, 2014 at 20:59
Thanks for all the comments everybody. I'll come back to it tomorrow. — user3468711
– user3468711, Commented May 8, 2014 at 21:00

scrodde · Accepted Answer · 2014-05-08 20:47:40Z

3

Ensure you're setting those hooks after the DOM has loaded and those elements exist. Wrap them inside a $(document).ready function like this:

$(document).ready(function() {
  $("a.show-notes").on('click',function(){
    var url = $(this).attr("href");
    console.log(url);
  });
});

edited May 8, 2014 at 20:47

answered May 8, 2014 at 20:38

scrodde

1065 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gershom Maes Over a year ago

This should work! One more thing you can try is testing the window.location.hash variable, which returns the hash-component of the current url.

imjared Over a year ago

I could be wrong but using .on should make the document.ready irrelevant.

Maurice Perry Over a year ago

The first version should work without doing this though

scrodde Over a year ago

From jQuery spec: "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()" api.jquery.com/on so the delegated format (first alternative) would work without dom ready

Maurice Perry Over a year ago

In the first version, the handler is bound to document (just like the ready handler in your code)

Wilmer · Accepted Answer · 2014-05-08 20:51:58Z

1

You have some syntax errors:

$(document).on('click',"a.show-notes",function(){
    var $url = $(this).attr("href");         //^missing parenthesis
    alert($url);
});
//^bad closing

Note: Also the $variable name convention is normally used only for jquery elements like:

var $element = $("li");

edited May 8, 2014 at 20:51

answered May 8, 2014 at 20:42

Wilmer

2,5091 gold badge14 silver badges8 bronze badges

Comments

Alexandre FILLATRE · Accepted Answer · 2014-05-08 20:41:07Z

0

Try

$('a.show-notes').click(function(){
    var $url = $(this).attr('href');
});

The variable $url variable can be named however you like (url, myLink, etc.) but it is only visible inside the click() function. If you want to use it outside, create the variable before the click() function, and set it inside.

answered May 8, 2014 at 20:41

Alexandre FILLATRE

1,32911 silver badges21 bronze badges

Collectives™ on Stack Overflow

setting href value to javascript variable on click

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related