selector 找不到变化的 element?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3281 天前的主题，其中的信息可能已经有所发展或是发生改变。

$('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')响应吗？

6 条回复 • 2015-12-03 10:20:17 +08:00

jiongxiaobu

2015-12-03 00:32:31 +08:00 via Android

$('button.unfollow')执行是在页面上有这个 class 的按钮之前。

ETiV

2015-12-03 01:55:23 +08:00 via iPhone

把 $（ el ）.bind （ evt ， cb ）改成
$（ document ）.delegate （ el ， evt ， cb ）

pubby

2015-12-03 04:18:54 +08:00 via Android

搜索: jquery 事件委托

cdxem713

2015-12-03 08:03:08 +08:00 via iPhone

事件绑定是预先绑定的，也就是说在你执行事件语句的那一刻，找出了一堆元素，把你写的 eventHander 绑定到相应的元素上了，之后这个绑定语句不再执行，也就不会有新的元素被绑定上你写的 eventHandler 。
解决方案见 3 楼

LancerComet

2015-12-03 09:11:11 +08:00

事件需要重新绑定， button.follow 的 onClick 事件是在页面加载完之后绑定的且之后没有更改，那个按钮仅仅被换了个 class 而已， onClick 事件还是 butron.follow 的。

maplerecall

2015-12-03 10:20:17 +08:00

这种建议使用事件委派，也就是通过给父容器绑定事件来处理内部还不存在或者还未生效的元素，大概是

$("button 的父元素选择器")
.on("click","button.follow",function(){…………})
.on("click","button.unfollow",function(){…………})