Change url using jquery

Question

Сan you explain please.

Why returned, only the first data attribute - "link-1.html", even if I click on the second link

<a class="project-link" href="link-1.html" data-url="link-1.html">
<a class="project-link" href="link-2.html" data-url="link-2.html">

var toUrl = $('.project-link').attr('data-url');
  $('a').click(function() {
  window.location.hash = toUrl;

});

The meaning of such action - my links open through Ajax, but I want to URL displayed in the browser.

I want to make it as behance, if you click on the cards portfolio, they displayed through Ajax in the same window, but it also left open the possibility of direct appeal to the links. That's why I want to URL displayed in the browser address bar

I am not sure this is correct code both links are missing their </a> attribute hence I think where you problem is coming from. Please confirm your markup is correct. — James
– James, Commented Aug 11, 2015 at 14:39

Dhaval Marthak · Accepted Answer · 2015-08-11 14:36:47Z

2

You have to get current target url by this

$('a').click(function() {
   var toUrl = $(this).data('url'); // use this as current target
   window.location.hash = toUrl;
});

I recommend you to use .data() when you're retrieving data attributes (only) instead of .attr()

Demo

answered Aug 11, 2015 at 14:36

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

3 Comments

Anton Reshetov Over a year ago

Thx! )) And a special thank you PeterKA for the detailed explanation!

Anton Reshetov Over a year ago

One question, how to remove # before a link?

Dhaval Marthak Over a year ago

@AntonReshetov I'm not getting your question can you elaborate?

PeterKA · Accepted Answer · 2015-08-11 15:19:40Z

1

.attr( attributeName )
Returns: String
Description: Get the value of an attribute for the first element in the set of matched elements.

$('.project-link') matches more than one element. Therefore, $('.project-link').attr('data-url') will return the value of the data-url attribute for the first element in the set.

To solve this you have maintain the context of the clicked element as you get the attribute, and you do this by using the this keyword.

And if you have other event listeners attached to the element already and you do not want them to fire -- although ajax calls will abort when the user is redirected -- you can use event.stopImmediatePropagation():

$('a').on('click', function( event ) {
    event.stopImmediatePropagation();
    window.location.hash = $(this).data('url'); //this here refers to the element that was clicked.
});

edited Aug 11, 2015 at 15:19

answered Aug 11, 2015 at 14:40

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

2 Comments

Anton Reshetov Over a year ago

special thank you PeterKA for the detailed explanation

PeterKA Over a year ago

Glad you found this helpful.

Kapsonfire · Accepted Answer · 2015-08-11 14:37:01Z

0

$('a[data-url]').click(function() {
     window.location.href = $(this).data("url");
});

answered Aug 11, 2015 at 14:37

Kapsonfire

1,0285 silver badges17 bronze badges

2 Comments

Kapsonfire Over a year ago

This code only applies on links with a data-url attribute

NathanOliver Over a year ago

Welcome to Stack Overflow! While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

Neil Villareal · Accepted Answer · 2015-08-11 14:37:21Z

0

You might want to try this:

$('.project-link').click(function(){
     window.location.hash = $(this).data('url');
});

answered Aug 11, 2015 at 14:37

Neil Villareal

6379 silver badges14 bronze badges

Collectives™ on Stack Overflow

Change url using jquery

4 Answers 4

Demo

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related