jQuery: Change all href values dynamically

Question

I've been looking for a question like this but none of them answer my question.

Please forgive me as I sometimes lack the ability to explain myself.

I have a page in sub1.domain.com where all links are formatted as

<a href="/link?param=whatever">

and I'm using jQuery to change the base domain to sub2.domain.com before the /link part that's different to the host to all hrefs on the page. I found this snippet while researching the issue. This is the code:

$('a').each(function() {
  $(this).attr("href", function(index, old) {
        return old.replace("/link", "https://sub2.domain1.com/link");
  });
});

And it works like a charm for static links but the thing is that the page is a search results page that dynamically loads new results even after the page has loaded.

How do I make it dynamic so that all links that are loaded by the search, are modified by this script automatically? In other words, how do I apply this script to links that appear after the page has loaded and new results are cominig in?

base href will not work in this instance as it somehow breaks the whole page.

Thank you.

What is the function that loads new results? Is it triggered when you scroll down far enough? Why not just apply the same logic there after the content loads in? — TRose
– TRose, Commented Sep 16, 2019 at 16:04

tmkiernan · Accepted Answer · 2019-09-16 16:06:01Z

1

You could actually bind this event to a click. So when clickinng the link it will run this function and change the link. This would then change any new link also as long as this is bound to a parent or the document for example below

$(document).on('click', 'a', function(e){
  e.preventDefault();

  var link = $(this).attr( 'href' );
  link = link.replace("/link", "https://sub2.domain1.com/link");
  window.location.href = link;
});

answered Sep 16, 2019 at 16:06

tmkiernan

3621 silver badge16 bronze badges

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

5 Comments

Marex Over a year ago

Wow, thanks so much. That's done it! Very nice and clean, but my links no longer open in a new tab as they did before. Hmm...

Marex Over a year ago

Ah, I see. I changed window.location.href = link; to window.open(link); and links now open in new tabs. Thank you so much!

Adnane Ar Over a year ago

@Marex Even though there is some browsers that block window popup, you should pay attention to this point!

Marex Over a year ago

@AdnaneAr But the links don't open as popups, just new tabs

Adnane Ar Over a year ago

@Marex Sometimes new tabs are counted as a popup if they're opened by javascript !

dganenco · Accepted Answer · 2019-09-16 16:16:24Z

0

Welcome to SO. I'd advise you to create a custom event and trigger it on any search or any other action you need. This approach is going to provide you a good flexibility and readability.

const table = $('#table');
let counter = 1;

$('#btn').on('click', function() {
  const row = $('<tr>');
  const cell = $('<td>');
  const link = $('<a>', {
    href: '/linktest',
    text: 'Test link ' + counter++
  });

  cell.append(link);
  row.append(cell);
  table.append(row);

  table.trigger('table.updated'); //triggering custom event
});


table.on('table.updated', function() { //custom event handler
  $('#table a').each(function() {
    $(this).attr('href', '/whatever_you_want');
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tr>
    <td><a href='/link'>Test link</a></td>
  </tr>
</table>

<button type='button' id='btn'>
  Add row
</button>

answered Sep 16, 2019 at 16:16

dganenco

1,6161 gold badge8 silver badges18 bronze badges

1 Comment

Marex Over a year ago

I went with the first solution as worked the first time and is very compact. Thank you for your help!

Adnane Ar · Accepted Answer · 2019-09-16 16:28:23Z

0

I wonder why no one of the other answers mentions that jQuery allows us to target all element with the same querySelector such for example if you want to target all aHref Elements you can just add a space after the letter a just like $("a ")!

const newLink="https://www.mynewLink.com";
$("a ").attr("href", newLink);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="https://www.google.com">Google</a>
<br><br>
<a target="_blank" href="https://www.facebook.com">Facebook</a>

answered Sep 16, 2019 at 16:28

Adnane Ar

6937 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery: Change all href values dynamically

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related