javascript - 无法让自定义对话框与 DirtyForms 一起使用

Question

我正在使用DirtyForms并且该插件的基本功能正在运行。当用户尝试离开页面时，浏览器会抛出一个确认对话框。

我们使用 jQuery UI 的对话框进行模式确认，我试图让它与 DirtyForms 一起使用，它有一个直接引用 jQuery UI 对话框的示例。我直接使用他们页面中的示例来设置自定义对话框，但它没有使用 jQuery 对话框，它仍然使用浏览器的 native 对话框:

$.DirtyForms.dialog = {
    selector: '#unsavedChanges',
    fire: function(message, dlgTitle) {
        $('#unsavedChanges').dialog({title: dlgTitle, width: 350, modal: true});
        $('#unsavedChanges').html(message);
    },
    bind: function() {
        $('#unsavedChanges').dialog('option', 'buttons',
            [
                {
                    text: "Stay Here",
                    click: function(e) {
                        $.DirtyForms.choiceContinue = false;
                        $(this).dialog('close');
                    }
                },
                {
                    text: "Leave This Page",
                    click: function(e) {
                        $.DirtyForms.choiceContinue = true;
                        $(this).dialog('close');
                    }
                }
            ] 
        ).bind('dialogclose', function(e) {
            // Execute the choice after the modal dialog closes
            $.DirtyForms.choiceCommit(e);
        });
    },
    refire: function(content) {
        return false;
    },
    stash: function() {
        return false;
    }
}

打开插件调试后，我没有收到任何错误(或任何其他 JS 错误)，但模式对话框不会触发，只有浏览器的 native 对话框。其他实现的 jQuery UI 对话框在同一页面上工作。我不确定我在这里可能会错过什么。任何帮助或见解将不胜感激。

Answer 1

最可能的问题是您的 HTML 标记中没有 ID 为 unsavedChanges 的 div 标记。因此，您应该添加 HTML...

<div id="unsavedChanges" style="display:none;" />

或 JavaScript 中的等效内容...

var $dlg = $('<div id="unsavedChanges" style="display:none;" />'); 
$('body').append($dlg);

如果这不是问题，我建议您编辑您的问题以包含 Minimal, Complete, and Verifiable Example ，通过发布整个 HTML 文档或使用诸如 JSFiddle 之类的服务.

NOTE: The custom dialog only works when a user clicks a hyperlink in the page. When the user interacts with the browser's navigation, the browser's dialog (if any) is shown. This is because there is no way to override the browser's default navigation behavior with a custom dialog.

In version 2.x it is now possible to customize the event binding, so you can add elements other than hyperlinks if clicking them navigates away from the current page.