JQuery点击事件在类更改后不能正常工作

JQuery click event not working correctly after class change

本文关键字：常工作 不能 工作 事件 JQuery      更新时间：2023-09-26

我有一个类似的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");
});

我的问题是，在我改变类的链接仍然是指它的旧类的点击事件。有重新绑定的方法吗?还是我做得不对?

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

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

参见toggleClass和live函数

。toggleClass(className)一个或多个类名(以空格分隔)，为匹配集合中的每个元素切换。

编辑jQuery 1.6.4+新版本

由于live函数不再存在，这里是一个替换:

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

问题是jQuery通过选择元素(这就是$('.follow_link')所做的)然后将事件处理程序绑定到这些元素(这就是.click*function(){所做的)来工作。如果类发生了变化，这并不重要。

Javascript有一个叫做事件冒泡的特性。这意味着祖先元素会收到其子元素上发生的事件通知。这意味着您可以在事件发生时测试选择器，而不是在文档就绪时。

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。

最好给每个链接一个第三个类，指定它们是组的一部分。比如a_link:

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

注意:我只是有这个问题，即使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");
});

Try: 

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

相关文章：