使用barba.js时对话div循环切换功能失效，求助排查

问题根源 #

1. 事件绑定语法错误：原代码错误地将transitionCompleted的回调函数写成立即执行函数，导致事件未正确绑定。
2. 重复绑定与作用域问题：每次触发页面切换事件都会重新声明变量并绑定点击事件，造成重复触发，同时切换索引变量会被重置。
3. DOM操作逻辑冲突：原代码用jQuery的hide()/show()切换显示，但初始隐藏的box依赖CSS的hidden类控制，两者逻辑冲突。
4. 动态内容事件失效：barba.js切换页面后，新渲染的.inner元素未重新绑定点击事件，直接绑定无法生效。

修复后的代码 #

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>1</title>
        <link rel="shortcut icon" href="https://files.catbox.moe/h33w19.png">
        <link rel="stylesheet" href="/style.css">
        <script src="https://kit.fontawesome.com/37b69e3f02.js" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
        </script>
        <script src="https://unpkg.com/@barba/core"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"></script>
        <style>
            .hidden { display: none; }
        </style>
    </head>
    <body>
        
    <div data-barba="wrapper">
        <main data-barba="container" class="container">
            
            <div class="icon"><img src="https://files.catbox.moe/v1ccbr.png" width="400"></div>

            <div class="dialoguewrap">
                <div class="arrowleft" style="visibility:hidden;"><a href="/index.html" data-direction="prev"><img src="https://files.catbox.moe/mosfgm.png"></a></div>
                
                <div class="box">
                    <div class="inner">
                        <div class="header">1/6</div>
                        Gabriel jolts awake. "That dream again..."<br><br>
                        He's been having these strange nightmares. 
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">2/6</div>
                        Each and every nightmare starts and ends the same way. He would be going about his daily life when suddenly abnormal occurrences would happen. 
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">3/6</div>
                        Once it was the beginning of World War 3. Another time it was a world-ending meteor from space. The strangest had to be the one where aliens attacked.
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">4/6</div>
                        And every time, without fail, he would die at the end.
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">5/6</div>
                        He was tired of these nightmares.  
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">6/6</div>
                        Gabriel decides to put it all past him for the time being. He gets up from bed and gets ready for school. It's his last year of high school. Only a few more weeks before he graduates.
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>
            
                <div class="arrowright"><a href="/pages/page2.html" data-direction="next"><img src="https://files.catbox.moe/mosfgm.png"></a></div>
            </div>
            
            <script src="/scripts/main.js"></script>  
            <script>
                barba.init({
                    hooks: {
                        after: function() {
                            // 事件委托绑定，兼容动态加载元素
                            $('.dialoguewrap').off('click', '.inner').on('click', '.inner', function() {
                                const boxes = $('.box');
                                // 获取当前显示的box索引
                                const currentIndex = boxes.index(boxes.not('.hidden'));
                                // 计算下一个循环索引
                                const nextIndex = (currentIndex + 1) % boxes.length;
                                // 切换hidden类控制显示
                                boxes.addClass('hidden');
                                boxes.eq(nextIndex).removeClass('hidden');
                            });
                        }
                    }
                });
                barba.Pjax.start();
            </script>
        </main>
    </div>
   
        
    </body>
</html>

关键修复说明 #

• 替换barba事件绑定方式：使用barba.init中的after钩子替代过时的Dispatcher，确保页面切换完成后执行初始化逻辑。
• 事件委托解决动态元素问题：通过父元素.dialoguewrap委托点击事件，同时用off避免重复绑定，确保新渲染的元素也能触发点击。
• 统一显示切换逻辑：沿用原有hidden类控制显示状态，避免jQuery方法与CSS规则冲突。
• 动态计算切换索引：每次点击时实时获取当前显示元素的索引，无需依赖全局变量，确保循环逻辑准确。

内容的提问来源于stack exchange，提问作者Adilene