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请求。如果响应正常，我更改按钮类（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});