javascript - $(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') 的更改保持一致当我想禁用鼠标点击时。但是，如果取消绑定(bind)点击，则不会重新绑定(bind)点击。这是新脚本(未进行 HTML 更改)。另外，我必须指定要取消绑定(bind)的确切点击处理程序 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);

已解决:

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

Answer 1

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

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

其他事情:

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

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

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

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