Tengo un código jquery que inserta y antepone migas de pan en ciertas páginas. Estoy inyectando este código a través de una herramienta de terceros donde puedo escribir JS. Solo quiero estas migas de pan para ciertas páginas.

Este fue mi código original que funcionó bien en el escritorio:

 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'); }); });

En el móvil no se cargó después de cambiar de categoría haciendo clic en los elementos li . Así que agregué $('body').change(runbread); para que aparezca al cambiar de categoría (la página no se actualiza en el móvil al hacer clic en una categoría, solo lo hace en el escritorio).

Pero ahora, se carga dos veces para dispositivos móviles y tres veces para computadoras de escritorio.

Aquí está mi 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'); } });

¿Cómo puedo asegurarme de que no se cargue varias veces?

Por lo tanto, en dispositivos móviles, debe cargarse al cargar la página Y volver a cargarse nuevamente cuando se hace clic en un elemento li (sin recarga de página, solo cambio de contenido). En el escritorio solo al cargar la página.

¡Agradezco cualquier ayuda!