jQuery会记住更改后的旧class/id

Question

我对jQuery有个问题。我收到两个jQuery点击事件。

$('.btn-subscribe').click(function() {
                $.ajax({
                    type: 'POST',
                    url: '{{ path('subscribe') }}',
                    data: 'id={{ user.getId }}',
                    success: function(data){
                        if(data == 'subscribed') {
                            alert(data);
                            $('.btn-subscribe').removeClass('btn-subscribe').addClass('btn-unsubscribe').text('Отписаться');
                        }
                        else {
                            alert(data);
                        }
                    }
                });
            });

            $('.btn-unsubscribe').click(function() {
                $.ajax({
                    type: 'POST',
                    url: '{{ path('unsubscribe') }}',
                    data: 'id={{ user.getId }}',
                    success: function(data){
                        if(data == 'unsubscribed') {
                            alert(data);
                            $('.btn-unsubscribe').removeClass('btn-unsubscribe').addClass('btn-subscribe').text('Подписаться');
                        }
                        else {
                            alert(data);
                        }
                    }
                });
            });

单击时，会出现一个ajax请求。如果响应是ok，我将按钮类(btn-subscribe改为btn-unsubscribe和btn-unsubscribe改为btn-subscribe)。因此，当按钮类发生变化时，它必须调用新的按钮事件，但仍然是通过旧的类调用事件。

如何解决这个问题？

Answer 1

使用事件委托，并按类注册侦听器，而不是按钮本身。

var buttons = $("button"); 
buttons.on("click", ".btn-subscribe", function (){//...etc});
buttons.on("click", ".btn-unsubscribe", function (){// ...etc});