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

Question

好的,所以我试图通过更改元素的id并将两个不同的函数应用于不同的id来启动/停止setInterval函数.这是现在的代码:

$(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(...

结合一个单击处理程序,以匹配所有元素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);
  });
});