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为真。

Answer 1

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

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

其他事项：

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

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

然后通常，您的代码是不合适的，因为每次调整窗口大小时，您都会绑定另一个click事件处理程序。假设您的窗口宽度为1920px。处理程序绑定页面加载。然后你将其调整为1600px。处理程序再次受到约束。这样，当事件发生时，它们将被调用两次。我建议用一面旗帜。像这样：

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

$（window）.resize仅在浏览器刷新时触发？

1 个答案:

其他事项：