Question

我正在尝试在我的某个网络应用程序中实现SPI。因此，我从不离开主页面（ window.onbeforeunload不会被解雇）。

这是简单的DOM结构

<html>
<head> include jquery and other js css stuff here </head>
<body>
    <div id="menu">Here i do magic to generate a top menu bar</div>
    <div id="content">
      This is the main content area where all the pages get loaded.
    </div>
</body>

每个菜单点击页面顶部的菜单栏，只需通过$.ajax()在“内容”div中刷新新页面内容。

这就是我想要实现的目标

说，

用户打开了一个页面，上面有表格元素。
用户继续在那里打字/选择了一些东西。
现在，在保存已加载的表单之前，用户点击了其他一些菜单项。

我是否可以捕获此事件并警告用户可能未保存的数据？如果是，怎么样？

我试着看Destroyed event。但是在元素（例如表单）被删除后，被破坏的事件被称为。我想在 之前捕捉 事件，并可能将其停止。

Answer 1

当一个表单字段聚焦时，您可以设想一个变量或data-*属性：

$('#formID input').focus(
     function(){
         $(this).closest('form').attr('data-inprogress','true');
         /* or:
         var formInProgress = true;
         */
     });

$('form').submit(
    function(){
        $(this).attr('data-inprogress','false');
        /* or:
        formInProgress = false;
        */
    });

然后，在点击会触发页面更改或删除form本身的元素时，请检查属性或变量，如果存在，请与用户确认他们要丢弃形式：

$('.pageChangeElements').click(
    function(){
        if ($('#formID').attr('data-inprogress') == 'true'){
            var c = confirm("Do you really want to discard the form?");

            if (c) {
                // continue
            }
            else {
                return false;
            }
        }
    });

JS Fiddle demonstration of concept

JQuery - 表单更改检测“之前”表单在Ajax中卸载

这就是我想要实现的目标

1 个答案: