我之前也碰到过一模一样的坑——明明DOM检查里value属性已经改了，但页面上的按钮文本就是纹丝不动，给你几个实际可行的排查和解决方向：

1. 先确认按钮的实际渲染结构 #

有些网站为了样式定制，会把提交按钮做特殊处理：

• 比如用<button type="submit">按钮文本</button>代替<input type="submit">，这种情况下修改value属性完全没用，得改按钮内部文本：

  $('#footer-btn').text('Please wait..');
  

• 还有的会给input按钮套一层容器，或者用CSS伪元素（:before/:after）来显示文本，这种情况你得找到实际负责显示的元素去修改，比如$('#footer-btn .btn-text').text('Please wait..');

2. 强制触发浏览器重绘 #

有时候浏览器会因为渲染优化，没有及时更新DOM的视觉表现，你可以手动触发重绘：

const $btn = $('#footer-btn');
$btn.prop('value', 'Please wait..');
// 用隐藏再显示的方式强制重绘
$btn.hide().show(0);

或者用更轻量的原生方式触发重绘：

const btn = document.getElementById('footer-btn');
btn.value = 'Please wait..';
btn.offsetHeight; // 读取offsetHeight会强制浏览器重绘元素

3. 检查是否有其他脚本覆盖了你的修改 #

页脚或联系页面的表单可能绑定了额外的提交验证脚本，在你修改value之后又把它改回了原值。你可以：

• 把你的修改代码延迟执行，避开冲突：

  setTimeout(() => {
    $('#footer-btn').prop('value', 'Please wait..');
  }, 100);
  

• 打开开发者工具的「事件监听器」面板，看看按钮或表单上绑定了哪些submit或click事件，排查是否有脚本在干扰你的修改。

4. 直接用原生JS操作DOM #

有时候jQuery的封装会带来一些隐藏的兼容性问题，试试跳过jQuery直接操作原生元素：

document.getElementById('footer-btn').value = 'Please wait..';

这种方式更直接，能排除jQuery封装层的潜在问题。

5. 确认选择器没有选错元素 #

虽然你说DOM检查里value变了，但还是要确认一下：页面上有没有重复的footer-btn ID？如果有多个相同ID的元素，jQuery只会选中第一个，可能你改的并不是页面上显示的那个按钮。可以用console.log($('#footer-btn'))打印看看，确认选中的元素数量和目标元素是否匹配。

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