IE7 change event not being triggered

Am I doing something wrong? Why isn't the click event registering on the first keydown?

http://jsfiddle.net/vol7ron/VJ5CX/

In the example,

1. Click the "Menu" to make sure it has focus
2. Use the arrow keys (up/down) to highlight an option
3. Use the spacebar to select the option

Notice how the change() event is not being called. Use the spacebar aga开发者_StackOverflow社区in to select the same option and notice it is working as it should.

I've tried:

• using the blur/focus according to this question, but haven't had any luck
• setting the checked attribute to false, to make sure the change event is triggered

Interesting Findings:

• There isn't a problem when using a mouse (it triggers the change event on the first time, as expected)
• The problem still occurs for the keydown, even after selecting with the mouse (run, click an option, hover to the option and use the keyboard).

Expected Results:

• Using keyboard navigation (up/down arrows) and selecting with the spacebar, should trigger both the "keydown" and "click" log. It doesn't work on the initial keydown, but does every subsequent time. (Check Firefox for a working example)

I was using blur/focus on the initial load. Apparently I needed the blur/focus inside the keydown event:

if (e.keyCode == 13 || e.keyCode == 32) {
   var cb = container.find('label.x-hover input:checkbox');

   cb.blur();             // <-- added
   cb.focus();            // <-- added
   cb.click();  
   updateLog('keydown');
   oTitle.focus();      
   return false;
}

Try doing this. It happened with me as well. But i tried this, it helped. I am not sure whether this will work or not.

container
.find('input[type="checkbox"]')
.change(function(){
   var cb     = $(this);
   var sClass = "checked";

   if (cb.prop(sClass)) { 
       cb.parent('label').addClass(sClass); 
   } else { 
       cb.parent('label').removeClass(sClass); 
   }
   updateLog('click');        
   oTitle.focus();
})

;