hover() and click() not playing well together

Question

Given the following code,the hover function works correctly, but when clicked, loses the clicked_no_event_box class. Not sure where I'm going wrong...

/* On document.ready.. */ $(function(){

        $(".no_event_box").hover(
         function(){$(this).addClass("clicked_no_event_box");}, 
         function(){$(this).removeClass("clicked_no_event_box");} 
        );   

        $(".no_event_box").click(
         function () {$(this).addClass("clicked_no_event_box");}
        );

    });

Answer 1

it works exactly as you told it to. if you want to have class to stick you can add an alias to that class name in css.

.clicked_no_event_box, .new_name_to_be_used_in_click_function {
    /* definition */
}

Answer 2

Since the hover function removes the class, even if you click, you could unbind the hover function once you click it.

$('.no_event_box').hover(
    function() {
        $(this).addClass('clicked_no_event_box');
    }, function() {
        $(this).removeClass('clicked_no_event_box');
    }
).click(function() {
    $(this)
        .addClass('clicked_no_event_box')
        .unbind('hover')
    ;
});