jQuery UI Dialog OnBeforeUnload

问题

I have a small problem. I\'m attempting to catch the OnUnLoad Event of the Window and ask a confirmation question and if the user decides they want to stay then fine, and if they want to leave the page then they\'ll lose all unsaved data. Here\'s the issues...

I\'m using a jQuery UI Dialog and when I put the following code on my page, I have the Dialog open, and when I click the back button on the browser, it never pops up the msgbox. It just refreshes the page:

<script type=\"text/javascript\"> 
    $(window).bind(\'beforeunload\', function() { 
            alert(\'you are an idiot!\'); 
        } 
    );
</script>

And the solution that I\'m using was a post here. Again, the msgbox will display fine if I do not have the jQuery UI Dialog open. If I do, then it doesn\'t display the msgbox and just refreshes the page.

Any ideas?

回答1:

The correct way to display the alert is to simply return a string. Don't call the alert() method yourself.

<script type="text/javascript">
    $(window).on('beforeunload', function() {
        if (iWantTo) {
            return 'you are an idiot!';
        }
    }); 
</script>

See also: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

回答2:

You can also make an exception for leaving the page via submitting a particular form:

$(window).bind('beforeunload', function(){
    return "Do you really want to leave now?";
});

$("#form_id").submit(function(){
    $(window).unbind("beforeunload");
});

回答3:

this works for me

$(window).bind('beforeunload', function() {
      return 'Do you really want to leave?' ;
});

回答4:

jQuery API specifically says not to bind to beforeunload, and instead should bind directly to the window.onbeforeunload, I just ran across a pretty bad memory in part due binding to beforeunload with jQuery.

回答5:

This works for me:

window.addEventListener("beforeunload", function(event) {
  event.returnValue = "You may have unsaved Data";
});

回答6:

For ASP.NET MVC if you want to make an exception for leaving the page via submitting a particular form:

Set a form id:

@using (Html.BeginForm("Create", "MgtJob", FormMethod.Post, new { id = "createjob" }))
{
  // Your code
}



<script type="text/javascript">

  // Without submit form
   $(window).bind('beforeunload', function () {
        if ($('input').val() !== '') {
            return "It looks like you have input you haven't submitted."
        }
    });

    // this will call before submit; and it will unbind beforeunload
    $(function () {
        $("#createjob").submit(function (event) {
            $(window).unbind("beforeunload");
        });
    });

</script>

来源：https://stackoverflow.com/questions/1889404/jquery-ui-dialog-onbeforeunload

标签

jquery

jquery-ui-dialog

onbeforeunload