jQuery过滤器点击事件仅第二次生效执行异常问题求助

• 代码执行时机错误：你当前的jQuery代码直接同步执行，若script标签放置在目标DOM元素（过滤器按钮、项目缩略图）之前，执行时目标元素还未完成渲染，$()选择器无法匹配到对应元素，导致初始隐藏逻辑失效、点击事件绑定失败。首次点击时事件未绑定所以无响应，后续页面DOM加载完成后事件才绑定完成，因此第二次点击生效。
• 语法错误：第二个script标签的结束标签书写错误，你写的是<script>而非</script>，会导致代码块解析异常。

将所有jQuery逻辑包裹在DOM就绪回调中，确保DOM完全加载后再执行绑定和初始操作，同时修正语法错误，修复后的完整代码如下：

<script>
// 等待DOM完全加载后执行代码
$(document).ready(function() {
  // 初始隐藏所有项目缩略图
  $('.project-thumbnail').hide();

  // 绑定digital过滤器点击事件
  $('#digital').click(function(){
    $('.project-thumbnail').hide();
    $('.digital').show();
  });

  // 绑定print过滤器点击事件
  $('#print').click(function(){
    $('.project-thumbnail').hide();
    $('.print').show();
  });

  // 绑定branding过滤器点击事件
  $('#branding').click(function(){
    $('.project-thumbnail').hide();
  });
});
</script>

如果修复后仍有异常，可检查页面中是否存在其他同名ID的元素，或者其他冲突的点击事件逻辑即可。

内容的提问来源于stack exchange，提问作者Michael Nöthiger