Jquery

Question

我对 jquery 的 resize() 方法和单击事件有疑问：在下面的示例中，调整 window 的大小，单击事件仅在某些像素中有效。例如，一次调整 window 一个像素的宽度有时会起作用，但有时不会。为什么会出现这种行为？
如果我从我的代码中删除点击事件，toggleClass 对每个像素都可以正常工作。
我试过 firefox 和 chrome.

编辑： 只有当 window 宽度调整到低于给定尺寸时，我才需要点击才能工作。

jquery:

  $(document).ready(function(){
    $(window).resize(function() {
      if ($(window).width() < 1000) {
        $(".button").click(function() {
          $("#box").toggleClass("open");
        });  
      }
    });
  });

css:

#box {
  width: 300px;
  height: 300px;
  background-color: red;
}

#box.open {
  background-color: green;
}

html:

<body>
  <div id="box"></div>
  <button class="button">Click</button>
</body>

Example on Fiddle

Answer 1

这是因为每次 window 调整大小时您都会添加多个点击事件，因此在几次调整大小时，一次单击将 toggleClass、toggleClass、toggleClass... 调整大小的像素数 window 的倍数。

$(window).resize(function() {
  // Every time window resize do this:

  // Add new click event
  $(".button").click(function() {
    $("#box").toggleClass("open");
  });  
});

-- 编辑--
如果它只是针对特定的 window 大小，那么您实际上并不需要 resize 部分。
您可以在每次点击时检查 window 大小。
这应该足够了：

$(document).ready(function() {
  $(".button").click(function() {
    if ($(window).width() < 1000) {
      $("#box").toggleClass("open");
    }
  });
});

#box {
  width: 300px;
  height: 300px;
  background-color: red;
}

#box.open {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>
<button class="button">Click</button>

Jquery - resize() 上的点击事件无法正常工作

Jquery - Click event on resize() not work properly

resize

jquery-click-event