为什么click事件在$（window）.resize（）上不能工作两次？

Question

我想添加一个CSS类当我点击链接，如果窗口宽度小于500像素 ，另一个类，如果宽度比500像素更大。 我尝试了以下内容：

$(window).resize(function(){ 
  if ($(window).width() > 500) {
      $(document).on('click','#btn',function(e) {
          e.preventDefault();
          $("#div").addClass("red");
          $("#div").removeClass("blue");
          runFunctionA(); //is different from FunctionB()
      });   
  } else {
      $(document).on('click','#btn',function(e) {
          e.preventDefault();
          $("#div").addClass("blue");
          $("#div").removeClass("red");
          FunctionB(); //is different from FunctionA()
      });
  };
});

Codepen演示

仅当您将Codepen iframe窗口的大小调整为<500时 ，单击才有效，但如果> 500则不起作用。

任何帮助表示赞赏！ 非常感谢！

Answer 1

下面的代码工作基于窗口宽度，如果窗口调整大小发生然后你点击按钮，那时它将检查客户端宽度和处理功能

试试这个，

$(document).on('click', '#btn', function (e) {
    e.preventDefault();
    if ($(window).width() > 500) {
        $("#div").addClass("red");
        $("#div").removeClass("blue");
    } else {
        $("#div").addClass("blue");
        $("#div").removeClass("red");
    }
});

DEMO