jQuery自动回发问题

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;

            }
        }

    });

在不提交回发后仍然行为不正确，这应该允许它们在没有警告的情况下，但是保存脏状态，所以如果我更改dropdown，在回发上没有问题，但是如果我在那之后试图离开页面，应该会得到警告。此外，还需要注意提交回发，即保存按钮，显然允许它们并清除之前设置的所有脏标志。

Answer 1

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

此外，我们知道webforms页面只有一个表单。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叫什么吗？