Jquery class changing works, but doesn't effect another function like it should

Question

So I have content boxes that close and expand when you click an arrow. The content box has two classes for telling whether it is open or closed (.box_open, .box_closed). A hover function is assigned to box_open so when it is open and you hover over the header, the arrow appears. However, I don't want this to happen when the box is closed, as I want to arrow to remain visible when the box is closed. When the box closes, the box_open class is removed, but the function assigned to that class still works.

Here's the jquery code for the two functions. You can also see them in the head of the demo below.

    // Display Arrow on Box Header Hover

        $(".box_open").hover(
            function () {
                $(this).find('a').show();
            }, 
            function () {
                $(this).find('a').hide();
            }
        );

    // Open and Close Boxes:

        $(".box_header a").click(
            function () {
                $(this).parent().next('.box_border').stop().toggle();
                $(this).parent().toggleClass("box_open");
                $(this).parent().toggleClass("box_closed");
                return false;
            }
        );

Can anyone take a look at what the problem is?

Here's the demo url: Demo Url

Answer 1

Put this in your css file.

.box_closed a {
    display: inline !important;
}

Answer 2

The event handler is assigned to the element, not to the class label. So once assigned, removing the class name doesn't make the handler go away.

You could assign the event to 'box_header' and check for the existence of the 'box_open' class in your hover() code.

$('.box_header').hover(
function() {
    $(this).find('a').show();
},
function() {
    if($(this).hasClass('box_open'))
        $(this).find('a').hide();
});

EDIT: Added missing close parenthesis. Sloppy me!

Answer 3

Patrick's answer is correct, but there's a better way to do it: use jQuery.live(), which lets you "attach a handler to the event for all elements which match the current selector, now or in the future."

So, this should more-or-less get you what you want:

$('.box_open').live('hover', function (event) {
    if(event.type === 'mouseenter') {
        $(this).find('a').show();
    }
    else {
        $(this).find('a').hide();
    }
});

Poached pretty much straight from the jQuery docs.