如果数据被更改，防止 MaterializeCSS 模态关闭答案

【问题标题】：Prevent MaterializeCSS modal close if data was changed如果数据被更改，防止 MaterializeCSS 模态关闭
【发布时间】：2017-11-30 05:42:11
【问题描述】：

如何使用 MaterializeCSS 做到这一点？

如果用户更改了模式中的某些内容并尝试关闭它（通过单击外部、Esc 按钮或模式上的关闭按钮），我想确认该操作。

模态构造函数的complete选项仅在模态关闭后运行。

这就是我捕捉用户更改模态数据的方式：

var form_changed = false;

$('.modal').find('input, textarea, checkbox').on('change', function() {
    form_changed = true;
});

【问题讨论】：

标签： javascript jquery modal-dialog materialize

【解决方案1】：

这似乎不可能开箱即用。

看了source code之后，我想到了这个：

function addCloseHandler($modal, handler) {
    var modal = $modal[0].M_Modal;
    modal._close = modal.close;
    modal.close = function () { handler(function () { modal._close(); }); };
}

用法：

// $('.modal').modal();

addCloseHandler($('.modal'), function (close) {
    form_changed ? confirm('Confirm?') && close() : close();
});

【讨论】：

无法将$modal[0].M_Modal 分配给modal（modal 之后的值为undefined）
您需要在此之前使用$('.modal').modal(); 初始化您的模式。
谢谢。我在处理程序之前添加了模式初始化 - 现在没有 undefined。但仍然无法正常工作（关闭模式后没有确认窗口），所以我将调试命令添加到addCloseHandler（简单的console.log('[!] Breakpoint');）。当我关闭模态窗口时，它不会显示在 Chrome 控制台中。
Create a Minimal, Complete, and Verifiable example 使用 Stack Snippets 或 jsfiddle。
jsfiddle.net/ta01oy19 有效。我在addCloseHandler() 之后有这个$('#...').modal({complete: ...}); 块。现在修好了。谢谢！