Question

我是Javascript和JQuery的新手，我正在向用户显示一个警告，当用户对表单的输入/ select / textarea元素进行未保存的更改时，如果他们离开页面，则会显示这些警告。我目前有以下工作，当他们离开静态表单页面时工作正常：

/*
 * Warn users when leaving a page with unsaved content, watches elements: (input, textarea, select) unless
 * they are tagged with the "noWarning" class
 */
$(document).ready(function() {
    $(document).on('change', 'input:not(.noWarning),textarea:not(.noWarning),select:not(.noWarning)', function () {
        window.onbeforeunload =  function(e) {
              return 'You have unsaved changes';
        };
    });
});

唯一不起作用的页面位于我们的主编辑页面中。与其他页面不同，此页面有多个用于编辑项目不同方面的选项卡，单击这些选项卡时，会触发AJAX调用，该调用会使用适当的表单替换内容div以编辑不同的方面。

用户单击选项卡时不会显示警告对话框，因此输入的任何未保存更改都将丢失。

我的直觉是因为url没有改变，onBeforeUnload（）没有执行。因此，我必须直接检查函数中的任何更改，该函数在单击选项卡时处理AJAX调用以替换表单：

function clickedTabbedMenu() {
   // This function replaces the content div with a new div and form
}

所以我的问题是，在将内容div替换为另一个之前，我该如何检查当前表单中的元素是否有任何更改？我可以直接调用“更改”事件监听器的真/假???或者可能采用不同的方法处理此页面的警告消息？

感谢任何帮助

Answer 1

将change事件处理程序附加到表单的所有元素。在加载表单时，将处理程序范围dirty（或data元素上的form）之外的变量设置为false，并{每个true事件{1}}。然后，在替换表单之前，请检查change。

这对于非AJAX页面也是一个很好的策略 - 而不是每次元素更改时设置整个dirty，只需设置onBeforeUnload一次，然后检查{{1} }} 在里面。这使得处理您的AJAX和非AJAX页面非常相似。

编辑：未经测试，因为已经很晚了，我需要睡觉，但基本上是：

onBeforeUnload

Answer 2

我会尝试在你的ajax脚本中检查并调用window.onbeforeunload（）。

如果它存在并返回一个字符串，则将其用作错误消息并暂停操作：）

当在AJAX调用期间替换表单时，警告用户有关表单未保存的更改？

2 个答案: