3

我对如何使用jquery.dirtyforms感到困惑。

我正在尝试使用文本框和提交按钮创建一个简单的表单。如果用户在保存结果之前修改了文本框并尝试刷新页面或单击页面内的链接，Dirty Forms 插件应该提醒用户。但没有任何工作。

下面是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms({ 
        dialog: { title: 'Wait!' }, 
        message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
    });
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

这段代码有什么问题以及如何使用这个插件？

4

2 回答 2

1

虽然@Joffutt 提出了一个可行的解决方案，但他忽略了这种行为的解释。问题是您在这里设置了一个对话框模块：

dialog: { title: 'Wait!' },

这告诉 Dirty Forms不使用默认浏览器对话框并使用您的自定义对话框模块。但是，您没有按照文档完成其余的自定义对话框模块注册（即，您没有定义 open 方法），因此您的配置无效。

如果您不想要自定义对话框模块，则不应dialog:在配置中定义 a。

于 2017-01-10T07:40:44.217 回答
1

如果您从dirtyforms 调用中删除标题和消息，您的代码将起作用。根据文档：

// Customize the title and message.
// Note that title is not supported by browser dialogs, so you should 
// only set it if you are using a custom dialog or dialog module.
$('form').dirtyForms({ 
    dialog: { title: 'Wait!' }, 
    message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
});

因为您正在尝试使用默认浏览器对话框，所以这些额外的属性会导致脏表单代码中断。 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms();
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

于 2017-01-09T13:19:23.117 回答