jQuery脚本仅在控制台生效求助：页面点击事件无法触发

这是个很常见的DOM加载顺序问题，我来帮你拆解原因和解决方案：

问题根源 #

你的脚本文件是放在<head>标签里加载的，当浏览器执行这段脚本时，页面的<caption>元素还没被渲染出来——浏览器是从上到下解析HTML的，<head>里的代码执行完，才会开始渲染<body>里的内容。这时候$('caption')获取到的是空的jQuery对象，自然没法给不存在的元素绑定点击事件。

而你在浏览器控制台输入代码时，整个页面已经完全加载完成，DOM元素都已经存在了，所以代码能正常找到<caption>并绑定事件。

解决方案 #

有两种简单的方式可以解决这个问题：

方案1：把脚本移到<body>末尾 #

将你的脚本引用放在</body>标签的前面，这样脚本执行时，所有DOM元素都已经被渲染完毕：

<!DOCTYPE html>
<html>
<head>
  <title>Happy Birthday !</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta charset="utf-8">
</head>
<body>
  <table>
    <caption>Click here</caption>
    <tr> </tr>
  </table>
  <!-- 把脚本移到这里 -->
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

方案2：用$(document).ready()包裹代码 #

jQuery提供了$(document).ready()方法，它会等待整个DOM加载完成后再执行内部的代码，这样就能确保目标元素已经存在：

$(document).ready(function() {
  var $caption = $('caption');
  $caption.on('click', function(event) {
    $(' <td>Wp it worked</td>').insertAfter('tr');
  });
});

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

$(function() {
  var $caption = $('caption');
  $caption.on('click', function(event) {
    $(' <td>Wp it worked</td>').insertAfter('tr');
  });
});

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