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

我有类似这样的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和live函数

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

编辑新的jQuery版本1.6.4+

由于livefunction不再存在，这里有一个替代品：

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

Answer 2

问题是jQuery的工作原理是选择元素（这就是$('.follow_link')作用），然后将事件处理程序绑定到那些元素（这就是.click*function(){ $('.follow_link') 。）。 如果class级改变也没关系。

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

使用on函数，jQuery使这很简单：

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

Answer 3

最好给每个链接指定一个第三类，指定它们是一个组的一部分。 像a_link这样的a_link ：

 $('.a_link').bind('click', function () { $(this).toggleClass('follow_link unfollow_link'); }); 

Answer 4

注意：我刚刚遇到这个问题，即使on()函数仍然存在JQuery 1.10的问题，

实际上我通过替换解决了这个问题：

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

通过

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

Answer 5

尝试：

 $('.follow_link, .unfollow_link').click(function() { newclass = $(this).hasClass('follow_link') ? 'unfollow_link' : 'follow_link'; $(this).removeClass().addClass(newclass) }); 

编辑：尼尔斯的解决方案更好。