如何避免重复引入PHP文件时JavaScript监听器重复执行？

我完全懂你碰到的这个坑——当重复引入menu.php后，点击按钮时div刚右移就立刻弹回原位，这其实是两个问题叠加导致的：页面出现重复ID的元素，以及JavaScript事件被多次绑定。

问题根源分析 #

1. 重复的ID违反HTML规范：你两次引入menu.php，页面里就有了两个<button id="mover">，而HTML要求ID是页面唯一的。jQuery选择$('#mover')时虽然只会匹配第一个按钮，但后续重复加载JS会多次给这个按钮绑定点击事件。
2. 事件重复绑定：每次引入menu.php都会加载一次move.js，这就导致同一个点击逻辑被绑定了多次。点击按钮时，这些绑定的事件会依次执行，collapsed变量会被快速切换两次（false→true→false），看起来就是动画刚执行完右移，立刻又触发了回到原位的逻辑。

解决方案 #

这里给你两种可行的方案，从简单修复到更规范的实现：

方案一：保留menu.php引入JS，添加初始化判断+修复ID问题

先修改menu.php，把按钮的ID改成class（符合HTML唯一ID的要求）：

// menu.php
<button class="mover" type="button">ClickMe</button>
<script type="text/javascript" src="js/move.js"></script>

然后修改move.js，添加全局变量判断，确保事件只绑定一次：

// move.js
// 用全局变量标记是否已经初始化过事件
if (!window.moverEventInitialized) {
    let collapsed = false;
    // 用class选择器匹配所有按钮
    $('.mover').on('click', function () {
        if (collapsed) {
            $("#container").animate({ left: 0 }, "slow", function () {
                // 更新所有按钮的文本
                $('.mover').html('Original text');
            });
            collapsed = false;
        } else {
            $("#container").animate({ left: '25%' }, "slow", function () {
                $('.mover').html('Changed text');
            });
            collapsed = true;
        }
    });
    window.moverEventInitialized = true;
}

这样即使多次加载move.js，因为有window.moverEventInitialized的判断，只会执行一次事件绑定逻辑，就不会出现点击一次触发两次回调的问题了。

方案二：将JS从menu.php中移出，仅在index.php引入一次（更推荐）

这种方式更符合前端最佳实践，避免重复加载JS文件：

1. 修改menu.php，移除引入JS的代码：

// menu.php
<button class="mover" type="button">ClickMe</button>

2. 在index.php的末尾（比如</body>前）只引入一次move.js：

// index.php
<figure class="front">
<?php include ("menu.php"); ?>
</figure>
<figure class="back">
<?php include ("menu.php"); ?>
</figure>

<!-- 只在页面末尾引入一次JS -->
<script type="text/javascript" src="js/move.js"></script>

3. 最后调整move.js，用class选择器绑定事件即可：

// move.js
let collapsed = false;
$('.mover').on('click', function () {
    if (collapsed) {
        $("#container").animate({ left: 0 }, "slow", function () {
            $('.mover').html('Original text');
        });
        collapsed = false;
    } else {
        $("#container").animate({ left: '25%' }, "slow", function () {
            $('.mover').html('Changed text');
        });
        collapsed = true;
    }
});

这个方案彻底避免了重复加载JS和重复绑定事件的问题，代码结构也更清晰。

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