Unable to unbind the window beforeunload event in Jquery

Question

I have a page where the user can drag and drop objects and save them as an image.When a user navigates away from the page, the event beforeunload is fired. Now, this happens every time. What i want to do is, unbind the event if the user has saved his work, so that the message may not pop up again.To do this i have used the unbind method in jQuery. But, it does not seem to work. Below is the code for binding and unbinding the events.

var notSaved = function()
{
   return 'You have not yet saved your work.Do you want to continue? Doing so, may cause loss of your work' ;
}
$(window).bind('beforeunload', notSaved);

After save method has been called,

$(window).unbind('beforeunload', notSaved);

What am i doing wrong here?
Also, the save method is actually an Ajax call.

Answer 1

beforeunload doesn't work reliably this way, as far as binding goes. You should assign it natively:

window.onbeforeunload = function() {
  return 'You have not yet saved your work.Do you want to continue? Doing so, may cause loss of your work' ;
}

And in your save method:

window.onbeforeunload = null;