退出确认功能并使用 javascript 和 jQuery 删除提交时的功能答案

【问题标题】：Exit confirm function and removing the function on submit with javascript and jQuery退出确认功能并使用 javascript 和 jQuery 删除提交时的功能
【发布时间】：2015-05-05 19:23:11
【问题描述】：

如果不想提交表单，我希望能够允许用户确认是否要离开页面。
但是，我不希望此功能在提交按钮上起作用。当用户单击提交时，我不希望他们与退出确认混淆。
相关的 id 是 #publishbtn，我正在尝试使用 .off 方法。
脚本位于页面底部
不确定这是否是一个问题。

<%= f.submit "PUBLISH", :class => "greenbtn extrayo", :id => "publishbtn" %>


<script type="text/javascript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "Ready to move on? Or you wanna leave?";
  }
  $( "#publishbtn" ).click(function() {
  $( "body" )
    .off( "click", "#publishbtn", confirmExit )
    .find( "#publishbtn" )
      .text( "Put into" );
});
</script>

【问题讨论】：

标签： javascript jquery ruby-on-rails forms

【解决方案1】：

使用window.onbeforeunload = null 删除监听器。要在表单提交中删除它，您可以使用以下内容：

$('#someForm').on('submit', function (event) {
    window.onbeforeunload = null;
});

其中someForm 是您的<form> 元素的ID。

【讨论】：

非常感谢！它就像一个魅力！我会投票，但我是 stackoverflow 的新手。
欢迎来到stackoverflow！如果它解决了您的问题，您可以将此答案标记为已接受。如果你不知道怎么做，这里有一篇关于接受答案的好帖子：meta.stackexchange.com/a/5235/238078
对我不起作用（不知道为什么（我的回答确实有效（在 Chrome 中）））

【解决方案2】：

我正在这样做：

我将“确认”类添加到每个字段，如果像这样更改应该确认：

<label id="first_label" for="FName">First Name:</label>
            <input id="first" class="confirm" type="text" name="FName" value="@FName" />

我在提交表单时设置了needToConfirm的值，如下所示：

<input id="save" type="submit" name="buttonSubmit" value="Save" onclick="needToConfirm = false" />

然后在我的 java 脚本部分我添加了这个 jQuery 代码：

    $(document).ready(function () {
        needToConfirm = false; });

     $(document).ready(function(){$(window).unload(function() 
       {
        if (needToConfirm) 
         {
            return confirm("Your unsaved data will be lost, continue?");
            return needToConfirm;
         }
       });
    });

    $(".confirm").change(function () {
        needToConfirm = true;
    });

如果用户尝试离开页面而不保存，则使用确认类更改字段的值将导致出现警告。否则它只是提交表单。

【讨论】：

【解决方案3】：

您可以设置window.onbeforeunload=null。

您可以通过多种方式做到这一点。在他们提交表单后设置值的一种方法（确保更改选择器以定位正确的表单）：

$("#form").submit(function(){
    window.onbeforeunload=null
});

或者您可以在用户单击表单的提交按钮时执行此操作。这两种方法都是正确的。

$("#publishbtn").click(function() {
    window.onbeforeunload=null;
});

【讨论】：

【解决方案4】：

This answer 对我不起作用，这确实起作用：（铬）

html:

<input type="submit" onclick="clearConfirm();" value="Submit">

js:

function clearConfirm() {
    window.onbeforeunload = null;
}

不知道为什么……

【讨论】：