Javascript jqueryclick只注册第一次单击，不注册后续单击

我有一组三个按钮。相关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);
    }
  });
});

---

谢谢。

正如@adeneo在上面的评论中指出的那样，

#refresh buttons

元素不能在

.container

元素中，因为您在

load（）

上覆盖了它，因此删除了附加的事件处理程序

如果

#refresh buttons

元素位于

.container

元素内，则必须在未更改的父元素上使用委托，如下所示：

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

---

正如@adeneo在上面的评论中指出的那样，

#refresh buttons

元素不能在

.container

元素中，因为您在

load（）

上覆盖了它，因此删除了附加的事件处理程序

如果

#refresh buttons

元素位于

.container

元素内，则必须在未更改的父元素上使用委托，如下所示：

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

---

如前所述，如果

.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);
        }
    }
});

---

您应该真正更改单击事件处理程序，使其不附加到

文档

。无论您如何更改页面，该示例都会起作用，但建议使用尽可能靠近按钮的选择器，如前所述，当您执行

load（）

时，该选择器不会改变，如果

.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);
        }
    }
});

---

您应该真正更改单击事件处理程序，使其不附加到

文档

。无论您如何更改页面，该示例都会起作用，但建议使用尽可能靠近按钮的选择器，这在执行

load（）时不会改变

和

#刷新按钮

当然不在

.container

元素中？实际上是的，#刷新按钮在

.container

元素中，现在你指出outAnd

#refresh button

当然不在

.container

元素中，这看起来显然是错误的？事实上是的，#refresh button在

.container

元素中，所以现在你指出outAnd

显然是错误的，非常感谢。我一整天都在用头撞这个小功能。我想关键的区别在于选择正确的元素进行过滤，并意识到加载的元素会覆盖任何以前存在的处理程序。再次感谢，这太棒了。我真的很喜欢你使用空白，更容易看。感谢click事件处理程序提示，我已经将处理程序的范围缩小到尽可能接近按钮组，并将加载范围缩小到页面中需要替换的部分。再次感谢你的建议。没问题，伙计-我很高兴能帮上忙：）非常感谢。我一整天都在用头撞这个小功能。我想关键的区别在于选择正确的元素进行过滤，并意识到加载的元素会覆盖任何以前存在的处理程序。再次感谢，这太棒了。我真的很喜欢你使用空白，更容易看。感谢click事件处理程序提示，我已经将处理程序的范围缩小到尽可能接近按钮组，并将加载范围缩小到页面中需要替换的部分。再次感谢你的建议。没问题，伙计-我很高兴能帮上忙：）