类更改后,JQuery单击事件无法正常工作

Question

我有类似这样的JQuery脚本:

$('.follow_link').click(function(){
  // Do some stuff
  $(this).removeClass();
  $(this).addClass("unfollow_link");
});

$('.unfollow_link').click(function(){
  // Do some stuff
  $(this).removeClass();
  $(this).addClass("follow_link");
});

我的问题是,在我更改类之后,链接仍然引用它的旧类'click事件.有没有重新绑定的方法？或者我这样做是不是很糟糕？

Answer 1

你可以使用这两个函数1:

$('.unfollow_link, .follow_link').live("click", function(){
    $(this).toggleClass("follow_link unfollow_link");
});

请参阅toggleClass和实时函数

.toggleClass(className) className要为匹配集中的每个元素切换的一个或多个类名(由空格分隔).

编辑新的jQuery版本1.6.4+

由于该live功能不再存在,这里有一个替代品:

$('body').on("click", '.unfollow_link, .follow_link', function(){
    $(this).toggleClass("follow_link unfollow_link");
});

Answer 2

问题是jQuery通过选择元素(这就是做什么$('.follow_link'))然后将事件处理程序绑定到那些元素(这就是做什么.click*function(){)来工作.如果班级改变也没关系.

Javascript有一个名为event bubbling的功能.这意味着祖先元素会被告知其后代的事件.这意味着您可以在事件发生时测试选择器,而不是文档就绪.

jQuery使这个on功能变得简单:

$(document.body).on('click', '.follow_link', function(){
  // Do some stuff
  $(this).removeClass();
  $(this).addClass("unfollow_link");
}).on('click', '.unfollow_link', function(){
  // Do some stuff
  $(this).removeClass();
  $(this).addClass("follow_link");
});

请注意,此函数是在jQuery 1.7中引入的.为了与以前的版本兼容,请使用delegate.