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.

score 36 · Accepted Answer · answered Dec 16 '10 at 09:50

36

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;

answered Dec 16 '10 at 09:50

Nick Craver

623,446
136
1,297
1,155

Thank you so much...that saved the day for me :) – bitblt Dec 17 '10 at 05:52
2

This won't work in IE, what you want is `window.onbeforeunload = undefined` – brupm Sep 30 '14 at 21:03

score 0 · Answer 2 · answered Nov 18 '19 at 04:03

const windowReloadBind = function(message) {
    window.onbeforeunload = function(event) {
        //--- Your logic
        return 'your output';
    }
};

const windowReloadUnBind = function() {
    window.onbeforeunload = function() {
      return null;
    };
};

Unable to unbind the window beforeunload event in Jquery

2 Answers2