This question already has answers here:
jQuery click event not working after adding class
                                
                                    (7个答案)
                                
                        
                4年前关闭。
            
        

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)。因此,当按钮类更改时,它必须调用新的按钮事件,但仍按旧类调用该事件。

如何解决?

最佳答案

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

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

关于javascript - 更改后,jQuery会记住旧的类/id。,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33431497/

10-12 13:02
查看更多