jQuery在更改后会记住旧的类/id

jQuery remembers the old class/id after changing

本文关键字：id jQuery 更新时间：2023-09-26

我对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-unssubscribe更改为btn-subscript）。因此，当按钮类发生更改时，它必须调用新的按钮事件，但仍然是由旧类调用事件。

如何解决此问题？

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

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