Make jQuery code run on page-change and load

Question

I have a jquery code that inserts and prepends breadcrumbs on certain pages. I'm injecting this code through a third party tool where I can write JS. I only want these breadcrumbs for certain pages.

This was my original code that worked fine on desktop:

var style = document.createElement("style");
style.id = "Imdone";
style.textContent = ".breadcrumbs-mai{color:#555; font-size:14px; width:100%; padding:10px 5px;font-weight:200;}";
document.querySelector("head").appendChild(style);

require(['jquery'], function($){
  $(document).ready(function() {
    var bread = $('<div class="breadcrumbs-mai"><a href="https://www.norli.no">Hjem </a>/ <a href="https://www.norli.no/">Test </a>/ <a href="https://www.norli.no/">Test2 </a>/ <a href="https://www.norli.no/">test 3</a>/ <a style="color:#000; font-weight:600;" href="https://www.norli.no/">Test 4 </a></div>').prependTo('#page-title-heading');
  });
});

On mobile it didn't load after changing category by clicking the li items. So I added $('body').change(runbread); to make it appear when switching category(page does not refresh on mobile when clicking a category, only does so on desktop).

But now, it loads twice for mobile and three times on desktop.

Here is my JS:

var style = document.createElement("style");
style.id = "Imdone";
style.textContent = ".breadcrumbs-mai{color:#555; font-size:14px; width:100%; padding:10px 5px;font-weight:200;}";
document.querySelector("head").appendChild(style);

require(['jquery'], function($){
  $(document).ready(function() {
    $("body").change(runbread);
  });
  
  function runbread(){
    var bread = $('<div class="breadcrumbs-mai"><a href="https://www.norli.no">Test </a>/ <a href="https://www.norli.no/">Test 2 </a>/ <a href="https://www.norli.no/">Test 3 </a>/ <a href="https://www.norli.no/">Test 4</a>/ <a style="color:#000; font-weight:600;" href="https://www.norli.no/">Test 5</a></div>').prependTo('#page-title-heading');
  }
});

How can I make sure it doesn't load several times?

So, on mobile it should load on page-load AND re-load again when a li item is clicked(no page-reload, only content change). On desktop only on page-load.

Appreciate any help!

Inside your runbread function do $('#page-title-heading .breadcrumbs-mai').remove() at the start. IT will remove the "old" records — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Apr 29, 2022 at 12:24
But im a bit unsure why you want to use change function for the body — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Apr 29, 2022 at 12:25
When I view the HTML in the console, it's the only thing I see changing when clicking the categories. Should I use change on something else? I added the removefunction in the runbread function, it removed all 3. I added the code tghat worked fine on desktop before I tried fixing it for mobile. — R. Srour
– R. Srour, Commented Apr 29, 2022 at 12:28
Yes it's safe to use. Basically it just removes any that might exist before addin a new one. — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Apr 29, 2022 at 12:46

Carsten Løvbo Andersen · Accepted Answer · 2022-04-29 15:11:04Z

1

You can add $('#page-title-heading .breadcrumbs-mai').remove() to the start of your runbread function.

This will remove any other .breadcrumbs that might have been added before.

answered Apr 29, 2022 at 15:11

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

Make jQuery code run on page-change and load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related