Why should I click twice for keypress when I put keypress event in click event?


#1
var main = function() {
    $('.article').click(function() {
        $(document).keypress(function(event) {
            if (event.which === 111) {
                $('.current').children('.description').toggle();
            } 
        });
        $('.article').removeClass('current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
    });
    
};

$(document).ready(main);

I just can't figure out why should I click twice then I am able to trigger keypress event.(I know I can put keypress event outside click event, and then I can keypress o when I click just once, yet I still want to know the answer of this issue.)


#2

I found the answer. Every time when you try to click, it will generate one keypress handler. So when you click even times, It will generate even times, and when you press key, it seems like nothing happen on the page, yet it has been pressed even times.