0

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

谢谢。

4

2 回答 2

2

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

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

$(".container").on("click", "#refresh-buttons button", function(event) {...});
于 2013-09-12T22:21:44.503 回答
1

如前所述，如果.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().

于 2013-09-12T22:30:34.343 回答