jQuery点击仅注册第一次点击，而不注册后续点击

Question

我有一个由三个按钮组成的按钮组。 相关的haml代码为：

   .btn-group#refresh-buttons
              %button.btn.btn-default#refresh-5-sec 5 sec
              %button.btn.btn-default#refresh-30-sec 30 sec
              %button.btn.btn-default#refresh-60-sec 60 sec

我正在尝试构建可调整的刷新率功能。 第一次单击会注册并正确设置刷新率（我检查了事件对象），但是随后对任何按钮的后续单击都不会注册，因此不会创建事件对象。 我的JS代码如下：

$(document).ready(function() {

  var intervalId = window.setInterval(function(){
     $('.container').load('/dashboard/index .container');
  }, 60000);
  console.log(intervalId);

  $("#refresh-buttons").on("click", "button", function(event) {
    if(event.target.id === "refresh-5-sec") {
      clearInterval(intervalId);
      setInterval(function(){
         $('.container').load('/dashboard/index .container');
      }, 5000);
    }
    else if(event.target.id === "refresh-30-sec") {
      clearInterval(intervalId);
      setInterval(function(){
         $('.container').load('/dashboard/index .container');
      }, 10000);
    }
    else if(event.target.id === "refresh-60-sec") {
      clearInterval(intervalId);
      setInterval(function(){
         $('.container').load('/dashboard/index .container');
      }, 15000);
    }
  });
});

谢谢。

Answer 1

正如@adeneo在上面的评论中指出的那样， #refresh-buttons元素不能位于.container元素内，因为您在load()上覆盖了它，因此删除了附加的事件处理程序。

如果#refresh-buttons元素位于.container元素内，则必须在不变的父元素上使用委托，如下所示：

$(".container").on("click", "#refresh-buttons button", function(event) {...});

Answer 2

如前所述，如果.container元素包含按钮组，则需要使用事件委托。 但是，代码中还有另一个问题。 您并不是每次更改刷新率时都设置intervalId ，因此最终会运行多个setInterval()实例。

我还整理了一些代码重复进行中...

$(document).ready(function() {

    var intervalId = window.setInterval(function(){
        $('.container').load('/dashboard/index .container');
    }, 60000);
    console.log(intervalId);

    $(document).on("click", "#refresh-buttons button", function(event) {

        var interval = 0;

        switch(event.target.id) {
            case: "refresh-5-sec" {
                interval = 5000;
                break;
            }
            case: "refresh-30-sec" {
                interval = 30000;
                break;
            }
            case: "refresh-60-sec" {
                interval = 60000;
                break;
            }
        }

        if (interval != 0)
        {
            clearInterval(intervalId);
            intervalId = setInterval(function(){
                $('.container').load('/dashboard/index .container');
            }, interval);
        }
    }
});

您应该真正更改click事件处理程序，使其不附加到document 。 无论您如何更改页面，该示例都将起作用，但是建议使用与按钮最接近的选择器，当您执行load()时，该选择器也不会改变。