javascript - 删除 beforeClose 事件处理程序 - jQuery UI 对话框

Question

我有一个 jQuery UI 对话框，里面有一个表单。我正在尝试实现一项功能，如果表单中的某个字段已被修改，我们将使用 noty 显示确认消息。

现在，与 javaScript 确认框不同，noty 不会停止脚本执行。所以，在对话框 beforeClose 事件中，我是 -

如果表单数据被修改，则显示通知确认，然后返回 false。 如果表单数据未被修改，则简单地返回 true。

一切正常。现在我们问用户 -

表单中的数据已被修改。您确定要关闭吗？

如果他点击否 - 我们只需关闭通知并保持对话框打开。 但如果他点击是，我们会尝试关闭对话框，这会再次触发beforeClose 事件处理程序，然后我们再次进入循环。

我试过在调用关闭事件之前在已转换为对话框的 div 上调用 .off，但这似乎并没有被删除点击。

这是一个简单的伪代码来解释这个问题-

DialogCloseEvent() {
    if data has been modified { 
        Show noty {
            // IMPORTANT - This is executed after return false.
            in noty user clicks NO - do not close dialog box {
                close noty and done
            } 
            in noty user clicks YES - close the dialog box {
                // This calls the DialogCloseEvent again.   
                call the close method of the dialog box.            
                close noty
            }
        }
        return false
    }   
    no it has not been modifed {
        // Closes the dialog without calling the event again
        return true;
    }
}

Answer 1

扩展你的伪代码，你可以添加一个标志来强制关闭对话框:

var forceClose = false;

DialogCloseEvent() {
    if data has been modified and !forceClose  { 
        Show noty {
            // IMPORTANT - This is executed after return false.
            in noty user clicks NO - do not close dialog box {
                close noty and done
            } 
            in noty user clicks YES{ 

                forceClose = true;

                - close the dialog box {
                    // This calls the DialogCloseEvent again.   
                    call the close method of the dialog box.            
                    close noty
                }
            }
        }
        return false
    }   
    no it has not been modifed {
        // Closes the dialog without calling the event again
        return true;
    }
}

更新代码

var forceClose = false;

$("#dialog").dialog({
    open: function (event, ui) {
        forceClose = false; //reset the flag each time
    },
    beforeClose: function (event, ui) {
        if(forceClose){
            return true;
        }

        //your dialog close event
        //set the flag to true when you want to close the jqueryui dialog

    }
});