javascript - jQuery .on()、.live() 和 .click() 都只工作一次

Question

我已经尝试了所有这三种方法，它们中的每一种都只能工作一次，我必须刷新才能让它再次工作。这是我的代码。

$(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');
        });
    });
});

谢谢

Answer 1

只需使用在和.toggle()之间切换：display: blockdisplay: none

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        $('#notificationTB').attr('src',function(i,str) {
            return (str=='img/notifC.png') ? 'img/notif.png' : 'img/notifC.png';
        });
        $('#notifBox').toggle();
    });
});

或者更好：

$(document).on('click', '#notificationTB', function(){
        $(this).attr('src',function(i,str) {
            return (str=='img/notifC.png') ? 'img/notif.png' : 'img/notifC.png';
        });
        $('#notifBox').toggle();
    });
});

http://api.jquery.com/attr/#attr-attributeName-functionindex--attr

Answer 2

看起来您正试图在两种状态之间切换。你是怎么做的不是很好，因为在它自己的点击处理程序中定义一个元素的点击处理程序通常是一种糟糕的形式，特别是因为在这种情况下旧的没有被删除。尝试这个：

$(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');
        }
    });
});

Answer 3

尝试这个

$(document).ready(function(){
    $(document).on('click', '#notificationTB', 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).on('click', '#notificationTB', function(){
    $('#notificationTB').attr('src','img/notifC.png');
    $('#notifBox').css('display', 'block');
    $(this).on('click', function(){
        $('#notificationTB').attr('src','img/notif.png');
        $('#notifBox').css('display', 'none');
    });
});

Answer 4

为什么在拥有 jQuery 时使用 getElementById？

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        var $box = $('#notifBox'), $this = $(this);
        $box.toggle();      
        if($box.is(":visible")){
            $this.attr('src','img/notifC.png');
        }else{
            $this.attr('src','img/notif.png');
        }       
    });
});