Laravel项目中Ajax .load未加载HTML到div反而跳转链接求助

看起来你的核心问题是点击侧边栏链接时，e.preventDefault()没有生效，链接还是会触发默认跳转。这大概率是jQuery加载顺序错误导致的，我来帮你一步步排查和解决：

1. 最关键的问题：脚本加载顺序颠倒 #

你现在的脚本引入顺序是先加载Popper、Bootstrap，再加载jQuery，但Bootstrap的JS组件完全依赖jQuery，而且你的自定义脚本也需要jQuery的$对象。这种顺序下，Bootstrap初始化会失败，同时你的自定义脚本里的$(function(){...})也会因为$未定义而不执行，自然事件绑定根本没生效，点击链接就会走默认跳转行为。

修正后的脚本加载顺序 #

把jQuery放在最前面，然后是Popper，最后是Bootstrap，你的自定义脚本要放在jQuery之后：

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 再加载Popper -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- 最后加载Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<!-- 你的自定义脚本放在jQuery之后 -->
<script>
$(function () {
    $('#sideCont a').on('click', function (e) {
        e.preventDefault();
        var page = $(this).attr('href');
        // 加个日志验证事件是否触发
        console.log('准备加载页面:', page);
        $('#contentCont').load(page);
    });
});
</script>

2. 验证事件是否生效 #

修改后，打开浏览器开发者工具（按F12），切换到Console标签，点击侧边栏链接：

• 如果能看到准备加载页面: xxx的日志，说明事件绑定成功，e.preventDefault()已经生效，接下来只需要确认page对应的路径是否能被正确加载（比如asset('page1.html')返回的路径是否存在）。
• 如果看不到日志，说明还是有问题，检查Console里有没有$ is not defined之类的错误，这说明jQuery还是没加载成功。

3. 备选方案：使用事件委托 #

如果你的侧边栏是动态生成的（比如后续通过JS添加链接），可以改用事件委托来绑定事件，确保所有#sideCont下的a标签都能触发：

$(function () {
    $(document).on('click', '#sideCont a', function (e) {
        e.preventDefault();
        var page = $(this).attr('href');
        console.log('准备加载页面:', page);
        $('#contentCont').load(page);
    });
});

4. 额外注意点 #

• 对于href是#home这种锚点的链接，load('#home')不会加载页面内容，你需要单独处理这种情况（比如滚动到对应位置或显示内部内容）。
• 确保page对应的路径是可访问的，比如asset('page1.html')要确保这个文件存在于public目录下，否则load会失败。

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