JavaScript实现点击保存按钮显示提示div时遇到页面刷新问题

问题根因 #

• 现有逻辑写在$(document).ready()回调中，页面加载完成就会自动执行，所以打开页面就会显示提示
• 点击按钮自动刷新，通常是因为你的Save按钮是表单内的submit类型按钮，点击会触发默认的表单提交行为，导致页面重载，提示还没渲染就被刷新掉了

修复方案 #

1. 调整提示div默认状态 #

给提示div加默认隐藏样式，避免页面加载时直接显示：

<div id="fadeDiv" style="display: none;">
    <p>内容已保存！</p>
</div>

2. 修改JS绑定点击事件，阻止默认刷新行为 #

$(document).ready(function () {
    $('#saveBtn').click(function (e) {
        // 阻止按钮默认的表单提交/页面刷新行为
        e.preventDefault();
        // 触发提示动画
        $('#fadeDiv').fadeIn(1000);
        setTimeout(function () {
            $('#fadeDiv').fadeOut(1000);
        }, 1000);
        // 如需提交数据到后端，在此处写AJAX异步提交逻辑即可，不要使用表单默认同步提交
    });
});

补充说明 #

如果需要提交表单数据，使用异步AJAX提交不会触发页面刷新，可等请求返回成功结果后再执行提示动画，逻辑更严谨。

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