4

Here's the code, using jQuery 1.4.4:

<input type="checkbox" value="on" offval="off" id="c5f1_Associated" name="Associated" class="editable">    
<script type="text/javascript">
$('input:checkbox').live('change', function() {
    alert('Changed!');
    // some other code
});
</script>

(The checkboxes are generated by jqGrid, so they're a little messy.)

In Chrome, the function fires immediately upon clicking on a checkbox.

In IE6, this only fires upon clicking on a checkbox and THEN clicking on something else on the page (i.e. blurs).

According to the jQuery 1.4 release notes:

change and submit events normalized

The change and submit events work reliably across browsers for both normal and live events. We override the normal change and submit events in Internet Explorer and replace them with events that work identically to the other browsers.

This behavior doesn't sound very normalized to me!

From what I could find, there was bugs related to using .live("change") in IE in earlier versions of 1.4, but they were supposedly fixed in 1.4.2.

Am I doing something wrong, or is this how it's supposed to work in IE6? Will I be forced to do something like this?

Community
  • 1
  • 1
adamjford
  • 7,478
  • 6
  • 29
  • 41
  • Have you tried delegate http://api.jquery.com/delegate/ as well? – ScottE Jan 13 '11 at 22:34
  • @ScottE: Just tried `$('body').delegate('input:checkbox', 'change', ...);`, same behavior. – adamjford Jan 13 '11 at 22:40
  • Shouldn't you be using click anyway? – ScottE Jan 13 '11 at 22:42
  • @ScottE: `click` could possibly work, as I'm verifying the state of the checkbox anyway, but the event should technically only fire when the checkbox's state changes. Just want to make sure there's not a way to make the code that more accurately portrays the requirements work before I replace it with a workaround. – adamjford Jan 13 '11 at 22:44
  • @adamjford How are you defining your checkboxes? Could you show your HTML for them? – lonesomeday Jan 13 '11 at 22:51
  • @lonesomeday: I added an example to the question. – adamjford Jan 13 '11 at 22:55
  • Does [this](http://jsfiddle.net/lonesomeday/U7A5L/) work in IE6? Sorry, I can't test it myself... Just trying to make sure that this is a general bug, rather than one specific to your page. – lonesomeday Jan 13 '11 at 23:02
  • @lonesomeday: Hmm, your snippet works fine in IE6! Something mysterious is going on... – adamjford Jan 14 '11 at 16:51
  • @adamjford Could you link to your actual page? – lonesomeday Jan 14 '11 at 23:31

1 Answers1

1

The only potential problem I see with "click" is that if the user navigates to the checkbox using the tab key and then uses the space bar to select/deselect it, the event won't fire. Therefore, you'd need to add an extra bit of code for a keydown or keyup event on the checkbox:

$('input:checkbox').live('click', function(){
    checkBoxChanged();
}).keyup(function(e){
    if(e.which == 32){ //if the key pressed was the space bar
        checkBoxChanged();
    }
});

function checkBoxChanged(){
    alert('changed!');
    //other code
}
maxedison
  • 17,243
  • 14
  • 67
  • 114