检测表单是否已更改，脚本不起作用

Question

我正在尝试使用以下脚本来检测我的表单中的任何字段是否已更改（编辑：检测我的表单字段的值是否已更改），如果是，则提醒用户。否则显示另一个js框。

但它没有检测到任何更改，并且从未显示确认框。我做错了什么？

$('#eventMedia').click(function() {
        var form_changed = false;

        $('#tribe-events > form').on('keyup change', 'input, select, textarea', function(){
            form_changed = true;
        });

        if (form_changed == true) {
            confirm('You have unsaved changes! Click Cancel to save your changes before continuing.');
        } else {
            $('#eventMediaBox').show();
            $('#blackFade').show();
        }
    });

Answer 1

只有在单击 #eventMedia 按钮后，您才开始注册 keyup 和 change 事件，这可能不是所需的事情顺序。

改为：

// Set the boolean flag variable first
var form_changed = false;

// On `input change` events - set flag to truthy
$('#tribe-events > form').on('input change', 'input, select, textarea', function(){
    form_changed = true;
});

// Showtime!
$('#eventMedia').click(function() {
    if (form_changed) {
        alert('You have unsaved changes! Save your changes before continuing.');
    } else {
        $('#eventMediaBox, #blackFade').show();
    }
});

请注意"input" 事件（在.on('input change' 中）还将涵盖用户使用鼠标等粘贴内容的情况...

另外，不要忘记有时在代码中将 form_changed 重置为 false...

---

现在回想一下您的用户界面...我有一个问题。 “为什么？”。是的，如果用户没有更改表单中的任何内容，为什么要显示“SAVE”或#eventMedia 所做的任何事情？我的意思是，如果用户做了任何更改，那么就没有理由做任何事情 - 对吧？

我认为这应该足够了：

> button is disabled="true"
> (User makes changes?) on `input change` make enabled.