title: jQuery beforeunload and areYouSure jquery plugin
body: <p>I found that we can use  two commonly used functions to stop propagating before leaving the unsaved data</p>
  
  <ul>
  <li>beforeunload </li>
  <li>areYouSure - jquery plugin</li>
  </ul>
  
  <p>Both of the above can be used. following is the minor code i tested</p>
  
  <pre><code> &lt;script&gt;
   $(function() {
  
      $('#form').data('serialize',$('#form').serialize()); // On load save form current state
  
      $(window).bind('beforeunload', function(e){                       // binding the beforeunload
          if($('#form').serialize()!= $('#form').data('serialize'))
              return true; 
          else 
              e=null; // i.e; if form state change show warning box, else don't show it.
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>Note: i am unbinding the function for save button to hide the warning
    same code i tested for <strong>areYouSure</strong></p>
  </blockquote>
  
  <p>so now my question is, am i following the correct approach, and which one is better efficiency wise ?</p>