$(window).resize 仅在浏览器刷新时触发？

Question

我已经阅读了 SO 中关于 jQuery 窗口大小调整事件和使其工作的方法的大量条目 - 即，

    $(window).on('resize',function(),
    $(window).bind('resize',function(),
    $(window).resize(function()

无论出于何种原因，它只在页面刷新时才对我有用。

这是我的代码：

$(function() {
  function checkWinSize() {
    if ($(window).width() >= 1120) {
      //Enable Click Handler
      $('#menu-top-inner nav > ul > li').click(function () {
        $(this).not('.menu-title').addClass('menu-on');
        $(this).children('.top-items').show();
      }).mouseleave(function () {
        $(this).removeClass('menu-on');
        $(this).children('.top-items').hide();
      });
      $('#top-eg').click(function () {
        loadTopMenu(this, '/eyeglasses/all-prescription-eyeglasses.aspx #alphaLinks + div');
      });
      $('#top-sg').click(function () {
        loadTopMenu(this, '/sunglasses/all-sunglasses.aspx #alphaLinks + div');
      });
      $('#top-ps').click(function () {
        loadTopMenu(this, '/prescription-sunglasses/all-prescription-sunglasses.aspx #alphaLinks + div');
      });
      $('#top-cl').click(function () {
        loadTopMenu(this, '/contact-lenses/all-contact-lenses.aspx #alphaLinks + div');
      });
    } else {
      //Disable Click Handler
      $('#menu-top-inner nav > ui > li').click(false);
    }
  }
  checkWinSize();

  $(window).on('resize', function () {
    checkWinSize();
  });
});

编辑：这是 HTML

<!-- MENU TOP START ++ -->
<div id="menu-top">
  <!-- MENU TOP INNER START ++ -->
  <div id="menu-top-inner">
    <!-- NAV START ++ -->   
    <nav role="navigation">
      <ul>
        <li id="top-men"><span>Men</span>
          <div class="top-items">
            <asp:Literal ID="ltrlTopMenuMen" runat="server" />
          </div>
        </li>
        <li id="top-women"><span>Women</span>
          <div class="top-items">
            <asp:Literal ID="ltrlTopMenuWomen" runat="server" />
          </div>
        </li>
        <li id="top-eg"><span>Eyeglasses</span>
          <div class="top-items">
            <asp:Literal ID="ltrlTopMenuEyeglasses" runat="server" />
          </div>
        </li>
        <li id="top-sg"><span>Sunglasses</span>
          <div class="top-items">
            <asp:Literal ID="ltrlTopMenuSunglasses" runat="server" />
          </div>
        </li>
        <li id="top-ps"><span>Prescription Sunglasses</span>
          <div class="top-items">
            <asp:Literal ID="ltrlTopMenuRxSunglasses" runat="server" />
          </div>
        </li>
        <li id="top-cl"><span>Contact Lenses</span>
          <div class="top-items">
            <asp:Literal ID="ltrlTopMenuContactLenses" runat="server" />
          </div>
        </li>
        <li id="top-help"><span>Help</span>
          <div class="top-items">
            <asp:Literal ID="ltrlTopMenuHelp" runat="server" />
          </div>
        </li>
      </ul>
    </nav>
    <!-- NAV END xx -->
  </div>
  <!-- MENU TOP INNER END xx -->
</div>
<!-- MENU TOP END xx -->

如果我调整窗口大小，菜单会保留其在文档加载时设置的点击状态。但是，如果我刷新页面，则会激活正确的点击处理程序设置。

对这里可能发生的事情的想法？

更新：当我想禁用鼠标点击时，我将点击处理程序更改为使用 .bind('click', function() 以与对 .unbind('click') 的更改保持一致。但是，如果单击未绑定，则不会重新绑定单击。这是新脚本（没有对 HTML 进行更改）。此外，我必须指定要取消绑定的确切点击处理程序 ID（之前不知道这一点）。此外，我检查以确保没有 $(window).resize('off') 的实例或其他可能对抗调整大小的代码。

var eventsBound = false;
function checkWinSize() {
  if ($(window).width() >= 1120 && !eventsBound) {
    eventsBound = true;
    $('#menu-top-inner nav > ul > li').bind('click', function () {
      $(this).not('.menu-title').addClass('menu-on');
      $(this).children('.top-items').show();
    }).mouseleave(function () {
      $(this).removeClass('menu-on');
      $(this).children('.top-items').hide();
    });
    $('#top-eg').bind('click', function () {
      loadTopMenu(this, '/eyeglasses/all-prescription-eyeglasses.aspx #alphaLinks +    div');
    });
    $('#top-sg').bind('click', function () {
      loadTopMenu(this, '/sunglasses/all-sunglasses.aspx #alphaLinks + div');
    });
    $('#top-ps').bind('click', function () {
      loadTopMenu(this, '/prescription-sunglasses/all-prescription-sunglasses.aspx #alphaLinks + div');
    });
    $('#top-cl').bind('click', function () {
      loadTopMenu(this, '/contact-lenses/all-contact-lenses.aspx #alphaLinks + div');
    });
  } else {
    eventsBound = false;
    $('#menu-top-inner nav > ul > li,#top-eg,#top-sg,#top-ps,#top-cl').unbind('click');
  }
}
$(window).on('resize', checkWinSize);

已解决：

我能够通过调整绑定检查的条件来解决最后一个问题。在 } else { 中，我将其更改为 } else if ($(window).width() < 1120 && eventsBound) {，因为即使窗口大小高于 1120 但已调整大小且 eventsBound 为 true，另一个正在处理所有内容。

Answer 1

我不认为你的解除绑定逻辑是正确的。要取消绑定 jQuery 中的事件处理程序，您应该使用

$('#menu-top-inner nav > ui > li').off('click');

补充：

您不必用匿名函数包装checkWinSize 函数。你可以简单地做

$(window).on('resize', checkWinSize);

那么一般来说，您的代码是不合适的，因为您每次调整窗口大小时都会绑定另一个 click 事件处理程序。假设您的窗口是 1920 像素宽。处理程序在页面加载时绑定。然后将其调整为 1600 像素。处理程序再次被绑定。这样，当事件发生时，它们将被调用两次。我建议使用旗帜。像这样：

$(function() {
    var eventsBound = false; //the flag
    function checkWinState() {
        if ($(window).width() >= 1120 && !eventsBound) {
            eventsBound = true;
            //bind the clicks
        } else {
            eventsBound = false;
            //unbind everything
        }
    }
    //...
});