$(window).on('load')失效：页面加载时无法通过jQuery添加按钮

嘿，我看了你的代码，逻辑本身没大毛病，但有几个小细节可能导致按钮没正常显示，我帮你梳理下排查方向：

1. 先确认jQuery是否正常加载 #

你用的是slim版jQuery，虽然它精简了ajax、动画这些功能，但DOM创建和追加元素是完全支持的。不过你可以先打开浏览器控制台（按F12），输入$回车，如果返回function说明jQuery加载成功；如果报错，那就是script标签的URL有问题，或者网络加载失败，换成完整版试试：

<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>

2. 试试更精准的DOM选择器 #

你的main元素有class="questions"，虽然$('main')能选中它，但换成类选择器会更精准，避免页面后续新增其他main元素的干扰：

$(window).on('load', function() { 
  const startPage = $("<button id='start'>Go</button>"); 
  $('.questions').append(startPage); 
});

3. 检查CSS是否把按钮“藏”起来了 #

有可能你的app.css里的样式不小心把按钮隐藏了——比如设置了display: none、opacity: 0，或者被其他元素完全覆盖。你可以先给按钮加个显眼的内联样式测试：

const startPage = $("<button id='start' style='padding: 12px; background: #ff4444; color: white; font-size: 16px;'>Go</button>");

如果这样按钮能显示，就去app.css里找对应的样式规则调整。

4. 换用更早触发的DOM就绪事件 #

window.load会等页面所有资源（图片、样式表、字体）都加载完才执行，而$(document).ready()只要DOM结构加载完成就触发，可能更适合你的场景，试试改成：

$(document).ready(function() { 
  const startPage = $("<button id='start'>Go</button>"); 
  $('main').append(startPage); 
});

甚至可以用更简洁的写法：

$(function() { 
  const startPage = $("<button id='start'>Go</button>"); 
  $('main').append(startPage); 
});

5. 调试确认代码是否真的执行了 #

你可以在代码里加个控制台输出，看看事件有没有被触发：

$(window).on('load', function() { 
  console.log("页面加载完成啦！"); // 打开控制台看有没有这条输出
  const startPage = $("<button id='start'>Go</button>"); 
  $('main').append(startPage); 
});

如果控制台没看到这条消息，说明window.load事件没触发，那就要检查页面是否有其他脚本阻止了事件执行，或者jQuery加载失败。

按上面的步骤排查，应该就能找到问题啦～

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