将函数应用于动态内容javascript/jquery

Question

好的，所以我试图通过改变元素的id来启动/停止setInterval函数，并将两个不同的函数应用于不同的id。下面是当前的代码:

$(document).ready(function(){
  var seq
  $('#start').click(function(){
     $(this).attr('id','stop');
     seq=self.setInterval(function(){blah()},125);
  });
  $('#stop').click(function(){
     $(this).attr('id','start');
     clearInterval(seq);
  });
});

当我点击#start元素时，setInterval开始，id变为#stop，但是如果我再次点击(在现在称为#stop的元素上)，执行#start的代码(添加另一个setInterval)由于

函数'blah'只是一个虚构函数的例子

Answer 1

当你说:

$('some selector').click(...

将click处理程序绑定到当前所有匹配some selector 的元素—它不会自动应用于将来可能匹配它的元素。

要使处理程序应用于在click事件发生时匹配选择器的元素，您需要使用委托事件处理程序，这意味着将处理程序附加到父元素(如果元素没有静态父元素，则附加到document):

$(document).ready(function(){
    var seq
    $(document).on('click', '#start', function(){
        $(this).attr('id','stop');
        seq=self.setInterval(function(){blah()},125);
    });
    $(document).on('click', '#stop', function(){
        $(this).attr('id','start');
        clearInterval(seq);
    });
});

.on()方法允许您根据传递给它的参数附加"正常"非委托处理程序或委托处理程序。

另一个选择是而不是更改id，并且只使用一个以某种方式测试当前状态的单击处理程序:

$(document).ready(function(){
  var seq;
  $('#start').click(function(){
     if (seq) {
        clearInterval(seq);
        seq = null;
     } else
        seq=self.setInterval(function(){blah()},125);
  });
});

Answer 2

我不会改变id，因为这不会改变事件绑定。通常不应该更改元素的id标签。更好的计划(至少对我来说)是将其设置为一个类。然后使用html数据标签来确定状态。

<button type="button" class="buttonClass" data-state="start">Button Text</button>

$(document).ready(function(){
  var seq
  $('.buttonClass').click(function(){
     var state = $(this).data('state');
     if(state=='start') {
         //do start interval stuff
         seq=self.setInterval(function(){blah()},125);
         $(this).data('state','stop'); //Change the state now
     } else if(state=='stop') {
         //do stop interval stuff
         clearInterval(seq)
         $(this).data('state','start'); //Change the state again
     }
  });
});

Answer 3

为什么不像这样检查状态(不需要在文档中添加事件侦听器):

$(document).ready(function(){
    var seq;
    $('#start').on('click', function(){
        if(!$(this).hasClass('running')){
            seq=self.setInterval(function(){blah()},125);
            $(this).addClass('running');
        }
        else{
            $(this).removeClass('running');
            clearInterval(seq);
        }
    });
});