为何这段jQuery窗口resize代码无法正常工作？

嘿，我来帮你搞定这个困扰！你的代码现在不管屏幕大小都会执行，核心问题出在重复绑定点击事件和未在屏幕变大时清理已绑定的事件上。下面我来拆解问题并给出修复方案：

问题根源分析 #

每次窗口resize时，只要视口宽度小于1025，你就会给.pagination div绑定一次点击事件。这会导致：

• 多次调整窗口后，同一个元素被绑定了N个相同的点击事件，哪怕之后屏幕尺寸超过1025，之前绑定的事件依然会生效
• 页面初始化时没有做尺寸检查，只有用户手动调整窗口后才会触发逻辑，体验不好

修复方案 #

我们需要把事件绑定和解绑的逻辑抽离，确保只在符合条件时绑定事件，不符合时立即解绑，同时页面加载时就执行一次检查：

$(document).ready(function() {
  // 单独抽离点击事件的处理函数，方便复用和解绑
  function handlePaginationClick() {
    const $caseStudies = $('.case-study');
    $caseStudies.css("position", "absolute");
    $caseStudies.eq($(this).index()).css("position", "relative");
  }

  // 定义尺寸检查与事件处理的核心函数
  function checkAndToggleEvents() {
    const viewportWidth = $(window).width();
    const $paginationItems = $('.pagination div');

    if (viewportWidth < 1025) {
      // 绑定前先解绑，避免重复绑定事件
      $paginationItems.off('click').on('click', handlePaginationClick);
    } else {
      // 屏幕尺寸超过阈值时，解绑点击事件
      $paginationItems.off('click');
      // 可选：重置case-study的布局，回到大屏默认状态
      $('.case-study').css("position", "relative");
    }
  }

  // 页面加载完成后立即执行一次检查
  checkAndToggleEvents();

  // 窗口大小变化时触发检查
  $(window).resize(function() {
    checkAndToggleEvents();
  });
});

关键优化点 #

• 避免重复绑定：使用off('click')先解绑再绑定，确保同一时刻只有一个点击事件生效
• 初始化检查：页面加载时就执行尺寸判断，不需要用户调整窗口才生效
• 清理逻辑：当屏幕尺寸超过1025时，不仅解绑事件，还可以重置元素样式，保证大屏布局正常

内容的提问来源于stack exchange，提问作者Al-76