jQuery调用load方法加载内容成功后页面立即自动刷新问题求解

问题原因 #

你的触发点击事件的#button_overview元素存在默认行为未被阻止：

• 如果该元素是表单内的<button>标签，浏览器默认会将其识别为type="submit"的提交按钮，点击后会触发表单提交逻辑导致页面刷新
• 如果该元素是带href属性的<a>标签，点击后会触发链接跳转逻辑导致页面刷新

load方法执行后默认行为紧接着触发，就会出现内容刚加载完成就随着页面刷新消失的现象。

修复方案 #

方案1：在点击事件中主动阻止默认行为 #

在事件回调中接收事件对象，调用preventDefault()方法即可，修正后代码如下：

<script>
$(function() {
  $("#button_overview").on("click", function(e){
    e.preventDefault();
    $("#homepagecontent").load("../description/overview.htm");   
  });
});
</script>

方案2：修改元素属性避免默认行为 #

如果是<button>元素，可以显式指定type属性为普通按钮：

<button type="button" id="button_overview">查看概述</button>

如果是<a>元素，可以将href属性设为javascript:void(0)：

<a href="javascript:void(0)" id="button_overview">查看概述</a>

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