点击锚点的JS代码仅在$(document).ready下生效，需实现仅点击触发

我来帮你理清楚问题出在哪，以及怎么解决！

问题根源拆解 #

1. 直接写点击事件不生效：这是因为你的JS脚本可能在页面DOM元素（也就是那个锚点按钮）还没加载完成时就执行了，jQuery找不到要绑定事件的元素，自然没法触发。
2. 加了$(document).ready后页面加载就触发：大概率是你在ready回调里直接调用了目标函数，而不是把函数绑定到点击事件上——相当于页面一就绪就主动执行了代码，而不是等点击才触发。

正确的实现方式 #

方式1：DOM就绪后绑定点击事件（最常用）

这种写法确保DOM加载完成后再绑定事件，而且只有点击时才会执行代码：

$(document).ready(function() {
  // 替换成你锚点的选择器，比如带有特定class或id的a标签
  $('a#target-anchor').click(function(e) {
    // 如果你需要阻止锚点默认的跳转行为，加上这行
    e.preventDefault();
    
    // 这里写你要执行的业务代码
    console.log("锚点被点击啦！");
    // 比如弹窗、数据请求等逻辑...
  });
});

方式2：事件委托（适合动态生成的锚点）

如果你的锚点是页面加载后通过JS动态添加的，上面的绑定可能失效，这时候用事件委托更稳妥：

$(document).ready(function() {
  // 把事件绑定到父元素（或document）上，监听子元素的点击
  $(document).on('click', 'a#target-anchor', function(e) {
    e.preventDefault();
    // 你的业务代码
  });
});

方式3：把脚本放在页面底部（不用ready）

如果你不想用$(document).ready，可以把你的JS脚本放在</body>标签的前面，这时候页面DOM已经加载完成，直接绑定事件也能生效：

<!-- 页面其他内容 -->

<script>
$('a#target-anchor').click(function(e) {
  e.preventDefault();
  // 你的代码
});
</script>
</body>

避坑提醒：别再直接执行函数啦！ #

看看你之前是不是犯了这个错误：

// ❌ 错误写法：页面加载就执行函数
$(document).ready(function() {
  myClickFunction(); // 一就绪就跑，不是点击才触发
});

// ✅ 正确写法：绑定点击事件
$(document).ready(function() {
  $('a#target-anchor').click(myClickFunction); // 只有点击才调用myClickFunction
});

这样调整后，你的代码就只会在点击锚点按钮时触发啦！

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