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和live功能

.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。

Answer 3

最好给每个链接指定第三个类，指定它们是组的一部分。像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)
});

<击>

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

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

5 个答案: