jQuery：在编辑模式下离开页面之前的确认对话框

Question

当用户编辑某些字段并尝试转到另一页面或单击靠近页面时，我尝试显示一条消息

消息出现

该页面要求您确认要离开-输入的数据可能不会保存。

我使用此代码：

$('#form').data('serialize',$('#form').serialize());
  // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null;
    // i.e; if form state change show box not.
});

仅当用户尝试编辑某些内容时，此代码才有效，否则我可以关闭页面，这就是我想要的。

问题是当我提交表单时消息也会出现

当我尝试click button提交时，消息也会出现

该页面要求您确认要离开-输入的数据可能不会保存。

当我单击提交按钮时，如何防止显示该消息？

Answer 1

将侦听器保存在变量中，并在提交时将其删除

 const onBeforeUnloadListener function(e){ if($('#form').serialize()!=$('#form').data('serialize'))return true; else e=null; // ie; if form state change show box not. } $(window).bind('beforeunload', onBeforeUnloadListener); $('#form').on('submit', function() { $(window).unbind('beforeunload', onBeforeUnloadListener) }