Javascript 检测表单是否已更改，脚本是否不工作

我正在尝试使用以下脚本来检测表单中的任何字段是否已更改（编辑：检测表单字段的值是否已更改），并在更改时通知用户。否则，将显示另一个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();
        }
    });

---

只有在单击了

#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'

）中）也将涵盖用户使用鼠标等粘贴内容的情况

另外，不要忘记在代码中有时将您的

表单更改回
false


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

我认为这就足够了：

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

“检测我表单中的任何字段是否已更改”？..从什么到什么？抱歉，检测我的任何表单字段的值是否已更改。那么什么是#eventMedia？是否在填写表单后单击它？？？如果是这种情况，在单击元素后如何检测键控或以前所做的更改。您需要将它们绑定到click方法之外。单击#eventMedia会带来在页面上添加一个新元素，允许用户上传图像。一旦他们保存上传的图像，页面将刷新，表单中任何未保存的更改都将丢失，因此我想提前通知用户。那么，您想检测的更改是在按钮点击前还是点击后进行的？如果是在按钮点击前，我以前的评论将保留。如果ter，在未单击元素时正在检查您的if。在上传发生之前您不会调用它…您可以删除
form\u changed==true
if（form\u changed）
就足够了。@roko-c-buljan@KostasX当然，但这完全取决于OP。有时，狡猾的程序员会重复使用同一个变量来分配不同的类型值。是的，当然，但您已经更改了OP代码！这也会使代码变得更好。非常感谢您提供的详细答案和解释。我对这一点不太了解（显然）当人们解释他们的答案以便我可以学习时，这会有所帮助。Roko，我没有那么狡猾，你关于
form\u change==true
@Eckstein you're welcome:）的说法是对的，不管怎样，我的答案编辑了一点。