javascript - 取消绑定元素并在动画停止后重新添加

Question

我正在尝试unbind一个元素，然后bind在页面滚动动画完成后返回：

$(".trigger").click(function(){
  $(".class1 a, .class2 a").unbind();
  $('html, body').stop().animate({scrollTop: $('#container').offset().top}, 1000);
  $(".class1 a, .class2 a").bind();
});

.class1 a然而，.class2 a永远不会被束缚？

Answer 1

如果要在动画后绑定事件处理程序，则必须使用回调函数。您还必须传递事件类型和回调来重新绑定处理程序

$(".trigger").click(function(){
  $(".class1 a, .class2 a").unbind();
  $('html, body').stop().animate({scrollTop: $('#container').offset().top}, 1000, function(){
      $(".class1 a, .class2 a").bind('sometype', somefunction);          
  });
});

Answer 2

当你bind解除绑定后的事件时，它没有任何信息previous handler.

所以你需要分配处理程序every time you bind the event。

$(".class1 a, .class2 a").bind(handler);

---

$(".trigger").click(function(){
  $(".class1 a, .class2 a").unbind();
  $('html, body').stop()
                 .animate({scrollTop: $('#container')
                 .offset().top}, 1000);
  $(".class1 a, .class2 a").bind(handler);
});

function handler(e){
   alert('Hey !!');
}

也使用.on() /.off() 代替，.bind()/.unbind()因为前者已被后者取代..

 $(".trigger").on('click', function(){
      $(".class1 a, .class2 a").off('click');
      $('html, body').stop()
                     .animate({scrollTop: $('#container')
                     .offset().top}, 1000);
      $(".class1 a, .class2 a").on('click' , handler);
    });

    function handler(e){
       alert('Hey !!');
    }