Javascript jQuery事件侦听器赢得'；t使用基于setInterval（）的Pomodoro计时器在代码中跳闸

我很难让jQuery事件侦听器跳闸，我怀疑这与我实现的基于setInterval（）的倒计时计时器的行为有关。程序执行setInterval函数时，事件侦听器是否未侦听？我是否错误地放置或实现了侦听器？页面上的其他jQuery函数也可以工作，所以我认为我没有错误地加载jQuery。我确信jQuery选择器与我想要听的按钮匹配。我不明白为什么听众不会绊倒，任何建议都非常感谢

// Check the page has loaded jQuery
$(function () {

// Some variable used by session and break timers
var sessionLength = 25;
var breakLength = 5;
var inSession = true;
var onBreak = false;
var start;

// Listen for click on session length incrementer (wont enter code block on click)
$("#buttonS+").on("click", function () {
  console.log("got here");
  sessionLength++;
  $("#sessDur").text(sessionLength);
});

// Run timer if session hasn't been canceled (this works)
if (inSession === true) {
  start = new Date();
  var sessionTimer = window.setInterval(function () {
    var timeElapsed = (new Date() - start) / 1000;
    var minElapsed = Math.floor(timeElapsed / 60);
    var secElapsed = timeElapsed % ((1 + minElapsed) * 60);
    var minLeft = sessionLength - minElapsed;
    var secLeft = 60 - secElapsed;
    if (secLeft < 0) {
      secLeft = secLeft + (60 * minElapsed);
    }
    if (Math.round(secLeft) === 60) {
      $("#timeDisplay").text((minLeft + 1) + ":00");
    }
    else if (secLeft > 9) {
      $("#timeDisplay").text(minLeft + ":" + Math.round(secLeft));
    }
    else {
      $("#timeDisplay").text(minLeft + ":0" + Math.round(secLeft));
    }
    if(minElapsed === sessionLength + 1) {
      window.clearInterval(sessionTimer);
    }
  }, 1000);
  }

  // Run break timer if on break (not fully implemented/ tested)
  if (onBreak === true) {
    start = new Date();
    var breakTimer = window.setInterval(function () {
      var timeElapsed = (new Date() - start) / 1000;
      var minElapsed = Math.floor(timeElapsed / 60);
      var secElapsed = timeElapsed % ((1 + minElapsed) * 60);
      var minLeft = breakLength - minElapsed;
      var secLeft = 60 - secElapsed;
      if (secLeft < 0) {
        secLeft = secLeft + (60 * minElapsed);
      }
      if (Math.round(secLeft) === 60) {
        $("#timeDisplay").text((minLeft + 1) + ":00");
      }
      else if (secLeft > 9) {
        $("#timeDisplay").text(minLeft + ":" + Math.round(secLeft));
      }
      else {
        $("#timeDisplay").text(minLeft + ":0" + Math.round(secLeft));
      }
      if(minElapsed === breakLength + 1) {
        window.clearInterval(breakTimer);
      }
    }, 1000);
}
});

//检查页面是否已加载jQuery
$（函数（）{
//会话和中断计时器使用的某些变量
var会话长度=25；
var-breakLength=5；
var插入=真；
var onBreak=false；
var启动；
//监听会话长度递增器上的单击（不会在单击时输入代码块）
$（“#按钮+”）。在（“单击”上，函数（）{
console.log（“到达这里”）；
会话长度++；
$（“#sessDur”）。文本（会话长度）；
});
//如果会话尚未取消，则运行计时器（此功能正常）
如果（插入===真）{
开始=新日期（）；
var sessionTimer=window.setInterval（函数（）{
var timeappeased=（新日期（）-start）/1000；
var MineFassed=数学下限（时间流逝/60）；
var SecAppeased=时间流逝%（（1+MineAppeased）*60）；
var minLeft=会话长度-已失效；
var secLeft=60秒已用时间；
if（secLeft<0）{
secLeft=secLeft+（60*失效）；
}
如果（数学四舍五入（秒左）==60）{
$（“#timeDisplay”）.text（（minLeft+1）+“：00”）；
}
否则如果（秒左>9）{
$（“#timeDisplay”）.text（minLeft+”：“+Math.round（secLeft））；
}
否则{
$（“#timeDisplay”）.text（minLeft+”：0“+Math.round（secLeft））；
}
if（mineLassed==会话长度+1）{
clearInterval（sessionTimer）；
}
}, 1000);
}
//在中断时运行中断计时器（未完全实施/测试）
如果（onBreak==真）{
开始=新日期（）；
var breakTimer=window.setInterval（函数（）{
var timeappeased=（新日期（）-start）/1000；
var MineFassed=数学下限（时间流逝/60）；
var SecAppeased=时间流逝%（（1+MineAppeased）*60）；
var minLeft=断裂长度-失效；
var secLeft=60秒已用时间；
if（secLeft<0）{
secLeft=secLeft+（60*失效）；
}
如果（数学四舍五入（秒左）==60）{
$（“#timeDisplay”）.text（（minLeft+1）+“：00”）；
}
否则如果（秒左>9）{
$（“#timeDisplay”）.text（minLeft+”：“+Math.round（secLeft））；
}
否则{
$（“#timeDisplay”）.text（minLeft+”：0“+Math.round（secLeft））；
}
if（mineLassed==断裂长度+1）{
窗口清除间隔（中断计时器）；
}
}, 1000);
}
});

据我所知，您的代码是正确的。但是，您的id（“按钮+”）可能是错误的。人们通常不会在标识符中添加运算符。

您是否在动态添加#按钮+？当您绑定事件侦听器时，它可能还不存在于DOM中。在id中使用“+”符号是不好的做法。它们通常用于“选择”相邻元素。这可能就是事件未触发的原因。也可能是您正在使用其他加载项有效地覆盖绑定事件。考虑把这个JS文件应用到最后一个。YUP，现在完全工作了。就像你说的，你不应该把操作员放在id里。多亏了所有回应的人，我才永远明白这一点。