点击跳转新页面后，jQuery选择器无法匹配元素怎么办？

看起来你遇到的核心问题是：跳转至新页面后，jQuery代码找不到目标div元素，导致无法插入数据。我来帮你拆解几个最可能的原因和对应的解决办法：

1. 先检查你的选择器是否正确 #

首先确认目标div的定义方式，jQuery选择器是严格对应DOM元素属性的：

• 如果你的div是id属性为article：<div id="article"></div>，那选择器必须是 $('#article')（注意#前缀）
• 如果是class属性为article：<div class="article"></div>，选择器是 $('.article')（注意.前缀）
• 如果是name属性为article：<div name="article"></div>，选择器是 $('[name="article"]')

很多时候找不到元素都是因为选择器和元素实际属性不匹配，你可以先在/article页面的浏览器控制台里直接输入选择器，看看能不能返回正确的DOM元素，比如输入 $('#article').length，如果返回0，那肯定是选择器写错了。

2. 确保代码在DOM完全加载后执行 #

如果你的main.js代码是直接全局执行的，而脚本加载位置在目标div之前（比如放在页面<head>里），那代码执行时DOM还没渲染出那个div，自然找不到。

解决办法是把操作DOM的代码包裹在jQuery的DOM ready事件里：

// 简写形式，等同于$(document).ready()
$(function() {
  const $article = $('#article'); // 这里替换成你正确的选择器
  console.log($article.length); // 现在应该能看到1而不是0
  // 插入数据
  $article.html('你要插入的内容');
});

这样代码会等整个页面DOM都加载完成后再执行，就能正确找到目标div了。

3. 确认main.js在/article页面正确加载 #

跳转至/article页面后，新页面的HTML模板里是否正确引入了main.js？比如你的Express模板（比如ejs、pug等）里，有没有在/article页面的模板中加入：

<script src="/path/to/main.js"></script>

如果首页加载了main.js，但/article页面没引入，那你的代码根本不会在新页面执行，自然无法操作div。另外要注意路径是否正确，避免404导致脚本没加载。

4. 检查模板是否正确渲染了目标div #

最后确认你的/article页面模板（比如article.ejs）里确实存在目标div，有没有拼写错误？比如是不是写成了<div id="artcle"></div>（少了一个i），或者根本没写这个div？可以在浏览器中打开/article页面，右键查看页面源代码，确认目标div是否存在。

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