jQuery按钮点击事件无响应问题求助

问题根源：你的main.js被放在<head>标签里加载，此时页面的<button id="btn">和<img id="tv">还没完成渲染，jQuery无法找到这些DOM元素，导致点击事件绑定失败。

以下是三种有效的解决办法：

方法1：将脚本引用移到<body>末尾 #

这是最直接简单的方案，确保DOM元素都加载完成后再执行JS代码。修改后的index.html如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <img src="twitter.jpg" id="tv">
    <button id="btn" >OK</button>
    
    <!-- 把脚本移到body最后 -->
    <script src='main.js'></script>
</body>
</html>

main.js保持原代码不变即可。

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

如果必须在<head>里加载脚本，可以用jQuery的ready方法，等待DOM完全加载后再执行绑定逻辑。修改main.js：

// 标准写法
$(document).ready(function() {
  $("#btn").on("click", function() { 
    $('#tv').hide(); 
  });
});

// 或者简写形式，效果完全一样
$(function() {
  $("#btn").on("click", function() { 
    $('#tv').hide(); 
  });
});

方法3：使用事件委托 #

通过将事件绑定到已存在的父元素（比如document）上，即使目标元素后续才加载，事件也能触发。修改main.js：

$(document).on("click", "#btn", function() { 
  $('#tv').hide(); 
});

这种方法特别适合页面中有动态添加元素的场景。

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