使用JQuery DirtyForms插件的示例

时间:2012-06-18 22:40:27

标签: jquery jquery-plugins jquery-dirtyforms

我正在使用jQuery DirtyForms插件来防止用户无意中离开页面而不保存。我在对话框中遇到了一些麻烦。我有两个按钮:取消和不保存。

“取消”操作正常工作:对话框关闭,未加载新页面。但是,“不保存”操作无效。应该加载新页面,但它没有发生。

我必须遗漏一些明显的东西。谁能看到我做错了什么?

<script type="text/javascript">

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

    $('a').click(function(event){
            event.preventDefault();
            var targetUrl = $(this).attr("href");

            if($.DirtyForms.isDirty()){
                    $("#dialog-savechanges").dialog({
                            height: 250,
                            width: 500,
                            modal: true,
                            buttons: {
                                    Cancel: function() {
                                            $( this ).dialog( "close" );
                                            $.DirtyForms.choiceContinue = false;
                                            $.DirtyForms.choiceCommit(event);
                                    },
                                    "Don't Save": function() {
                                            $( this ).dialog( "close" );
                                            $.DirtyForms.choiceContinue = true;
                                            $.DirtyForms.choiceCommit(event);
                                    }
                            }
                    });
            }
    });

</script>

<div id="dialog-savechanges" title="Save Changes?">
    <p>You've made changes to this page. Do you want to leave this page without saving?</p>
</div>

谢谢!

-Steve

1 个答案:

答案 0 :(得分:6)

好的,我知道这很明显......希望这会对别人有所帮助。

问题是preventDefault函数:

event.preventDefault();

删除后,对话框的行为符合预期。