onChange event not firing in IE8 when clicking on 'X' to close the dialog with most recent focus in changed input

onChange event not firing in IE8 when clicking on 'X' to close the dialog with most recent focus in changed input

I have a simple form that is displayed in a jquery-ui dialog box.  I've added an onchange event handler to all input fields of the form to mark the input with the "dirty" class when the input field changes.  Then in the beforeclose of the dialog, I check to see if there are any inputs with the "dirty" class.  If so I warn the user, that they've modified something in case they'd like to go back and save their changes.

The problem occurs when a user types in a field, then clicks the 'X' to close the dialog.  If they do this, the onchange event is never fired to mark the input field as "dirty" and the user is never warned.

The problem occurs in IE8 (and IE7).  FF 3.5.6 works as expected.  I tried all combinations of jquery versions 1.4.1, 1.4.0, 1.3.2, 1.3.1, & 1.3.0 with jquery-ui versions 1.7.2, 1.7.1, & 1.7.0.  Each time it worked in FF, but not in IE.

Here's what the simple form looks like:




Here is my simple page:
  1. <!DOCTYPE html>
    <html>
          <head>
             <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" rel="Stylesheet" />
             <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
                    
            <script type="text/javascript">
                  var $j = jQuery.noConflict();
                 
                $j(document).ready(function(){
                    //Adds dirty class to any form's input field that changes
                    $j('form :input').bind('change', function(){
                           $j(this).addClass("dirty");
                    });   

                    $j('#opendlg').click( function() {
                        $j('#dialogAdmin').dialog('open');
                    });
                   
                    //Set up the jQuery UI Dialog
                    $j('#dialogAdmin').dialog({    modal: true,
                                                draggable: true,
                                                width:460,
                                                buttons: {
                                                        "Save" : function () {
                                                                     alert('Save Functionality not implemented');
                                                                },
                                                        "Cancel" : function () {
                                                                    $j('#dialogAdmin').dialog('close');
                                                                }
                                                },
                                                beforeclose: function (event, ui) {
                                                                    //Check to see if any of the input fields are dirty.
                                                                    if ($j('.dirty').length > 0) {
                                                                        var answer = confirm('You made changes. Are you sure you want to close the dialog?');
                                                                        if (!answer){
                                                                            $j('#dialogAdmin').dialog('open');
                                                                            return false;
                                                                        }
                                                                    }
                                                                }
                    }); 
                });
            </script>
         </head>
        <body>
            TEST HTML to verify that the 'X' button doesn't fire the onchange event in IE    <button type='button' id='opendlg'>Open Dialog</button>
            <div id='dialogAdmin' style='display:none'>
                <form id="testForm" name="testForm" action="" method="post">
                    <div>
                        <table>
                            <Tr><td>Name:*</td>
                                <td>
                                    <input id="description" name="description" type="text" maxlength="100" class="required" title="Description is a required field."/>
                                </td>
                            </Tr>
                    </table>                       
                    </div>
                </form>
            </div>
         </body>
    </html>