Why does chrome display the pop-up warning: "Changes you made may not have been saved." on every page exit?
<h1>Setup</h1>

<p>I implemented some code to protect against users losing data from unsaved form that was supposed to show this but my code did not appear to be executed. My Code:</p>

<pre><code>$(window).on('beforeunload', function (e)
{
  if ($('.loading').length)
  {
    var confirmationMessage = 'Data is still being saved and/or loaded in the background. Leaving the page may cause your data to not be saved correctly.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  }

  if ($('form.detect-dirty.dirty').length)
  {
    var confirmationMessage = 'You have edited but not saved a form on this page.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  }
  return false;
});

$(document).on('submit', 'form', function()
{
  $(window).off('beforeunload');
});
</code></pre>

<p>Similar to what is pulled from this ticket: <a href="https://stackoverflow.com/questions/14341208/display-a-warning-with-onbeforeunload-when-leaving-a-page-except-if-submit">Display a warning with &#39;onbeforeunload&#39; when leaving a page, except if &#39;Submit&#39; is clicked</a></p>

<p>Of course there is additional code that marks a form as dirty when a field is edited.</p>

<h1>The Problem</h1>

<p>Starting a few days ago my web app suddenly started showing a window on every operation that would leave the page stating "Changes you made may not have been saved." </p>

<p>This ignored my dirty flag and the loading class that are required for the interruption and would not display my custom messages.</p>

<h1>Side Note</h1>

<p>The wording of my question is flagged as "subjective" however I tried to phrase it in the form of a question and match the key words I searched for in google to find the solution I'm about to post.</p>