如何使用jQuery选择PHP引入的HTML元素？

Hey Dan, let's work through why your jQuery selector is returning undefined here!

问题根源 #

你的PHP代码确实会把file.php里的.test元素输出到最终的HTML页面中，但问题出在JavaScript的执行时机：如果你的select.js在页面DOM还没完全渲染（也就是.test元素还没被浏览器解析出来）的时候就运行了，那jQuery自然找不到这个元素，返回的结果看起来就是undefined（严格来说是一个空的jQuery对象，但控制台打印时可能会显示类似结果）。另外还要确认你有没有正确加载jQuery库——如果$本身都未定义，那也会导致错误。

解决方案 #

这里有几个可靠的解决方法，选适合你的就行：

1. 用$(document).ready()包裹代码

这是jQuery经典的等待DOM加载完成的方式，确保你的选择器代码在所有DOM元素都渲染好之后再执行：

// select.js里改成这样
$(document).ready(function() {
  let a = $('.test');
  console.log(a); // 现在能拿到正确的jQuery对象了
});

也可以用更简洁的简写形式：

$(function() {
  let a = $('.test');
  console.log(a);
});

2. 把JS文件放在页面底部

把你的select.js放在</body>标签之前，也就是PHP引入的元素之后，这样当浏览器加载执行JS时，前面的.test元素已经被渲染到页面里了：

// index.php的结构调整成这样
<html>
<head>
  <!-- 先加载jQuery库，必须在你的自定义JS之前 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <?php include('file.php'); ?>
  <!-- 把你的JS放在元素之后 -->
  <script src="select.js"></script>
</body>
</html>

3. 检查jQuery的加载顺序

一定要确保jQuery库的脚本标签在select.js之前加载——如果select.js先运行，那$这个变量还没被定义，也会导致类似的错误，这点很容易忽略！

额外验证 #

如果还是有问题，可以先在浏览器的开发者工具里查看页面的HTML源码，确认.test元素确实存在；然后在控制台里手动输入$('.test')，看看能不能拿到结果，这样能快速排查是代码时机问题还是其他加载问题。

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