Question

我正在开发ASP.NET 3.5网站项目并使用jQuery警告用户，如果他们修改了一个页面并尝试离开页面而不保存，那么做这样的事情：

var warning = "Please save changes you made.";
var isDirty = false;

$(document).ready(function()
{

      $('input:text,input:checkbox,input:radio').bind('change', function()
      {

            isDirty = true;

            $('input[type=submit]').bind('click', function(e)
            {

                isDirty = false;
            });

            window.onbeforeunload = function()
            {

                if (isDirty)
                {

                    return warning;
                }
            }
        });
    });

它工作正常，但是当我在页面上进行更改然后在页面的下拉列表中选择一个不同的项目时，会导致回发，我会收到警告，我不应该这样做。实现这个是否可行jQuery中的功能，即在真正离开页面时发出警告，但忽略回发，以及在这种情况下我需要对脚本进行哪些更改？

好的，我稍微修改了脚本，创建了一个隐藏字段来保存回发之间的脏状态，所以它看起来像这样：

 var warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";
 var previouslyDirty = false;
 var isDirty = false;

 $(window).load(function()
 {

    previouslyDirty = $('#dirtyFlag').val() == '1';

 });

 $(window).unload(function()
 {

        $('#dirtyFlag').val(previouslyDirty ? '1' : '0');
 });

 $(document).ready(function()
 {

        $('input:checkbox,input:radio').one('change', function()
        {

            isDirty = true;

            previouslyDirty = true;

        });



        $('input:text, textarea').keydown(function()

        {

            isDirty = true;

            previouslyDirty = true;

        });

        $('form').submit(function(e)
        {

            isDirty = false;

            previouslyDirty = false;

        });

        $('select').bind('change', function(e)
        {

            isDirty = false;

            previouslyDirty = true;

        });

        window.onbeforeunload = function()
        {

            if (isDirty || previouslyDirty)
            {

                return warn_on_unload;

            }
        }

    });

在非提交回发后仍然表现不正确，它应该允许它们没有警告，但保存脏状态，所以如果我更改下拉列表，回发没有问题，但如果我在此之后尝试离开页面，应该得到一个警告。此外，需要注意提交回发，即保存按钮，显然允许它们并清除之前设置的所有脏标志。

Answer 1

由于我们已经有了jQuery，因此我们使用它来检测表单是否已更改为此问题的已接受答案中显示What is the easiest way to detect if at least one field has been changed on an HTML form?

此外，我们知道网页表单页面只有一个表单。在通过链接处理回发时，Webforms会调用form.onsubmit（）和form.submit（）。

要在AutoPostBack事件中跟踪原始序列化值，请将序列化表单数据存储在隐藏字段中。

<asp:HiddenField id="serializedForm" runat="server" />

$(document).ready(function(){

    var theform = $('form');
    var serialized = theform.serialize();
    var previous = null;

    // track original serialized across postbacks
    var hidden = $('#<%# serializedForm.ClientID %>');
    if ('' == hidden.val()) {
        serialized = hidden.val();
    } else {
        hidden.val( serialized );
    }

    window.onbeforeunload = function(e) {
        if (serialized != theform.serialize()) {
            return "Are you sure you want to leave the page without saving?";
        }
    }

    // postback -> __doPostBack -> form.onsubmit -> here
    theform.submit(function(){
        // keep in case of validation fail
        previous = serialized;

        // prevent the onbeforeunload prompt
        serialized = theform.serialize();
    });

    // there might be ASP.NET validators
    if (typeof(ValidatorOnSubmit) == "function") {
        var asp_ValidatorOnSubmit = ValidatorOnSubmit;
        ValidatorOnSubmit = function() {
            var result = asp_ValidatorOnSubmit.apply( arguments );
            if (!result) {
                serialized = previous;
            }
            return result;
        }
    }

});

Answer 2

您是否尝试过捕获表单的提交事件？（不是点击提交按钮，而是实际提交）

也许这会解决它..

$('form').submit(function(){isDirty = false;});

除非普通链接也提交表格......

Answer 3

这样的事情怎么样？

$(window).unload(function(event)
{
  if (event.target.nodeName != "SELECT" && event.target.nodeName != "INPUT" ) {
    $('#dirtyFlag').val(previouslyDirty ? '1' : '0');
  }
});

如果这不起作用，你能告诉我在各种情况下被叫event.target.nodeName的是什么吗？

jQuery autopostback问题

3 个答案: