javascript - jQuery .on()、. live()和.click()都只能通过一次

我已经尝试了所有这三个方法，但每个方法只能使用一次，并且我必须刷新才能使其再次起作用。这是我的代码。

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        document.getElementById('notificationTB').src='img/notifC.png';
        $('#notifBox').css('display', 'block');

        $(this).on('click', function(){
            document.getElementById('notificationTB').src='img/notif.png';
            $('#notifBox').css('display', 'none');
        });
    });
});

谢谢

最佳答案

您似乎正在尝试在两种状态之间切换。您的操作方式不是很好，因为在其自己的单击处理程序中定义元素的单击处理程序通常是较差的形式，尤其是因为在这种情况下，不会删除旧的单击处理程序。尝试这个：

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        var self = $(this); //refers to this element - $('#notificationTB')

        if(self.attr("src") == "img/notif.png"){
            self.attr("src", "img/notifC.png");
            $('#notifBox').css('display', 'block'); //.show() or .hide() will also do this
        } else {
            self.attr("src", "img/notif.png");
            $('#notifBox').css('display', 'none');
        }
    });
});