The change event is not triggered before the beforeunloadhow
<p>I know there are lots of questions about the "beforeunload" event and I think I read most of them. So I wrote the following code to warn a user about leaving a page before saving data, and it works most of the time.</p>

<p>It does not work when the user enters a value in input "f1" and leaves the page before tabbing out of the "f1". In that case the beforeunload event triggers before the change event and no warning is issued.</p>

<p>How should I modify the code?</p>

<p>thanks</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var g_page_changed = false;
$(document).ready(function(){
    $(window).bind('beforeunload', function() { 
        if (g_page_changed) {
            return 'Do you really want to leave without saving?' ; 
        }
    });

    $('input').change(function() {
        g_page_changed = true;
    });
});
&lt;/script&gt;
&lt;form id="frm"&gt;
 &lt;input id="f1" name="f1" type="text"/&gt;
&lt;/form&gt;
</code></pre>
