selector 找不到变化的 element?

$('button.follow').click(function(event){
var element = $(this);
var follow_user_id = element.attr('u_id');
$.ajax({
type: "POST",
url: "xxx",
data: xxx,
success: function(){
element.removeClass('btn-primary follow').addClass('btn-default unfollow');
element.html('Unfollow');
}
});
});

$('button.unfollow').click(function(event){ var element = $(this); var follow_user_id = element.attr('u_id'); $.ajax({ type: "POST", url: "xxxx", data: xxxxx, success: function(){ element.removeClass('btn-default unfollow').addClass('btn-primary follow'); element.html('Follow'); } }); }); 

第一次点击 follow button 后 button 变成 unfollow ， css 变成“ unfollow ”，再点击 button 时$('button.follow')再次响应而不是$('button.unfollow')。这个让我比较困惑，不应该是$('button.unfollow')响应吗？