How to add an HTML attribute to the current URL with jQuery

Question

Sorry guys, noob jQuery question. This is what I have:

HTML:

<div>
    <a class="tag-buttons" href="#" data-id="&product_tag=273" data-element_type="widget" data-widget_type="button.default">
        Sistemas de asistencia
    </a>
</div>

jQuery:

 $(document).ready(function(){
    url = window.location.href + attr('data-id');
      $(".tag-buttons").click(function(){
        $(".tag-buttons").attr("href", url);
      });
    });

What I'm doing wrong?

Thank you so much!

Bellash · Accepted Answer · 2020-03-30 11:05:32Z

2

Here's the solution

 $(document).ready(function(){
     var url = window.location.href;
       $(".tag-buttons").click(function(){
         url+=$(this).data('id');
         // $(this).attr("href", url);
          window.location = url;
       });
     });

edited Mar 30, 2020 at 11:05

answered Mar 29, 2020 at 21:59

Bellash

8,2776 gold badges57 silver badges95 bronze badges

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

1 Comment

Diego M. Over a year ago

Thank you @Bellash! It worked with a mousedown() event. Thank you.

Henfs · Accepted Answer · 2020-03-30 00:28:14Z

0

When you set your url, you forgot to tell where to take the data-id attribute.

Just replace:

attr('data-id')

by

$(".tag-buttons").attr('data-id')

edited Mar 30, 2020 at 0:28

Henfs

5,45912 gold badges33 silver badges48 bronze badges

answered Mar 29, 2020 at 22:05

moxy

3241 silver badge6 bronze badges

4 Comments

Rob Moll Over a year ago

I think $(".tag-buttons").attr('data-id') will return a set of matched elements consisting of all elements with class of tag-buttons. Unless there is only one element with the class of tag-buttons.

Diego M. Over a year ago

That's true. I was testing this on a separate document, but I want to use the data-id of the clicked element not all the data-id of the document.

Rob Moll Over a year ago

Have you tried @Bellash answer? I think his answer will give you what you want.

Diego M. Over a year ago

When I tested it load the same page, I tried to open the link on a new tab, the old tab load the result I want with the data-id and the new one loads the same page without it. I solved this with a mousedown() event. It worked perfectly. Thank you.

Collectives™ on Stack Overflow

How to add an HTML attribute to the current URL with jQuery

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related