解决jQuery面包屑代码在页面加载及无刷新页面切换时重复加载的问题

你的问题核心在于每次触发加载逻辑时没有清除已存在的面包屑，加上事件重复绑定导致了多次加载。下面是针对性的解决方案，既满足移动端切换分类时刷新面包屑，又保证桌面端仅加载一次：

核心优化点 #

• 每次生成面包屑前，先移除页面中已有的.breadcrumbs-mai元素，避免重复叠加
• 区分桌面端和移动端的触发逻辑，避免不必要的事件监听
• 确保事件只绑定一次，防止重复触发

完整修改代码 #

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($){
    // 定义面包屑生成函数
    function runbread(){
        // 先清除已存在的面包屑，避免重复叠加
        $('.breadcrumbs-mai').remove();
        // 创建新的面包屑并插入到目标位置
        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>');
        bread.prependTo('#page-title-heading');
    }

    $(document).ready(function() {
        // 页面初始化时先执行一次，生成初始面包屑
        runbread();

        // 判断当前设备是否为移动端（可根据项目实际响应式断点调整宽度阈值）
        var isMobile = $(window).width() < 768;
        if(isMobile){
            // 移动端监听分类切换事件（建议替换为实际触发分类切换的元素事件，比如li的click）
            // 用off+on确保事件不会被重复绑定，避免多次触发
            $('body').off('change').on('change', function(){
                runbread();
            });
        }
        // 桌面端无需额外监听，页面刷新会重新执行ready逻辑，自然只加载一次
    });
});

额外优化建议 #

1. 精准事件监听：body的change事件通常用于表单元素，建议替换成实际触发分类切换的li元素的click事件，比如：

   $('.category-switch li').off('click').on('click', function(){
       runbread();
   });
   

   这样能更精准地捕捉分类切换动作，避免无效触发。
2. 断点适配：代码中的768px是通用移动端断点，你可以根据项目的响应式设计调整这个数值。
3. 窗口大小变化适配：如果需要支持窗口缩放时自动切换逻辑，可以添加窗口 resize 监听，重新判断设备类型并调整事件绑定。

内容的提问来源于stack exchange，提问作者R. Srour