打开和关闭模式后，Dirtyforms 停止工作

Posted 2023-05-09

【中文标题】打开和关闭模式后，Dirtyforms 停止工作

【英文标题】：Dirtyforms stop working after I open and close a modal

【发布时间】：2017-05-23 14:13:14

【问题描述】：

我有一个表单，我想警告用户保存他们的数据。它是用 Dirtyforms 完成的。

我的表单中有一个按钮，它会打开一个带有一些额外表单的模式对话框。所以， 1. 我打开我的表单对话框 2. 在对话框中编辑（或不编辑）我的新表单 3. 关闭对话框 4. 返回我的第一个表单并点击离开。脏表格不会警告我丢失数据。

我在调试模式下检查了它，我在控制台中看到了这个：

[DirtyForms] Adding form w0 to forms to watch
[DirtyForms] Storing original value for _csrf
[DirtyForms] Storing original value for Prenajom[r1]
[DirtyForms] Entering: Leaving Event fired, type: click, element: http://k.local/..., class: btn btn-default popup-addon-table and id:
[DirtyForms] Leaving: Not dirty
[DirtyForms] Clearing the beforeunload event

在打开模式时，它会触发离开事件。 如何预防？

谢谢！

【参考方案1】：

默认情况下，所有锚标记 (<a>) 都会附加一个触发对话框的事件，因为没有合理的方法来区分离开页面的锚和不离开页面的锚。如果您有无法离开的锚标记，您应该ignore them，这样它们就不会触发对话框。

选项 1

设置 ignoreSelector 选项以忽略特定字段、锚点或按钮。

$('form').dirtyForms( ignoreSelector: 'a.ignore-me' );

选项 2

或者，将$.DirtyForms.ignoreClass 的值添加到您希望忽略的任何元素中，Dirty Forms 将忽略它们。

$('#ignored-element').addClass($.DirtyForms.ignoreClass);

选项 3

如果您想一次忽略多个元素，可以将$.DirtyForms.ignoreClass 的值（默认值dirtyignore）添加到包含元素。

<div class="dirtyignore">

    <!-- Everything here will be ignored - anchor, input, textarea, and select -->

</div>

【讨论】：

NightOwl888，感谢您的帮助。我已经尝试过这些方法，但对我没有任何作用。选项 1 什么都不做，在尝试了选项 #3 之后，我在控制台中得到了这个：'输入：Leaving 事件被触发，类型：单击，元素：[object htmlElement]，类：glyphicon glyphicon-list 和 id：[DirtyForms]离开：元素具有忽略类或被忽略元素的后代 [DirtyForms] 清除 beforeunload 事件。因此，DF 知道要忽略什么，但也清除了 beforeunload 事件，并且在我关闭模式后它不会警告更改。

【参考方案2】：

我收到了来自@NightOwl888 的答复，解决了我的问题：

“您的设置有一个问题是，如文档中所述，Dirty Forms 应该始终是堆栈中的最后一个 jQuery 插件。如果您在初始化 Dirty Forms 后将事件附加到按钮，则可能无法正确忽略。”