jquery onbeforeunload离开页面

Question

我有一个测试表单，当用户尝试使用未保存的数据离开表单时会显示警告消息。

我使用了jquery onbeforeunload。

我遇到的问题是，在表单取消按钮上有一个showProgressAnimation()调用，在页面执行操作时显示请等待图标。我已将showProgressAnimation()调用附加到取消按钮，每当调用取消按钮时都会触发此操作 - 即使用户请求保留在表单上也是如此。

当用户点击showProgressAnimation()生成的弹出窗口的“离开此页面”按钮时，如何触发调用onbeforeunload，但在表单时也会调用/触发是否正确提交（未调用“离开此页面”时）？

这是我的表单代码：

<form id="achievement_details_form" class="form-horizontal" method="post">

    .........culled for brevity..........

    <a href="{% url 'achievement_details' %}" class="btn" onclick="showProgressAnimation();">Cancel</a>

</form>

这是我的表单脚本：

<script>
    function showProgressAnimation() {
        $("#loading-div-background").show();
    }

    window.onbeforeunload = function(){
        return 'You have unsaved changes!';
    };
</script>