在用户点击其他链接之前要求确认，然后再提交数据

Question

我的 html 页面上有一个用于更新一些自定义数据的表单。在提交表单之前，我想向用户询问确认消息，如果他更新了表单中的数据并单击同一 html 页面上的其他链接。

我是如何实现的：

我已经创建了布尔变量来保持用户是否更新了任何字段的状态。我已经使用jquery在html页面中绑定了所有anchor标签的click事件。这样当用户单击页面上的任何锚标记时，我将检查状态变量是否为真（值已更改）。如果是真的，我想停止重定向并要求确认。

到目前为止，我已经完成了。但问题是即使用户点击确认框的cancel，我也无法停止重定向。

这里是代码

$(document).ready(function(){
  GLOBAL_NAMESPACE.value_changed = false;
  $("[id^='id_']").live('change', function (){
      GLOBAL_NAMESPACE.value_changed = true;
  });
});



$('a').bind('click',function (e) {
    e.preventDefault();
    if (GLOBAL_NAMESPACE.customize_option_changed){
        var res = confirm('you have unsaved changes. Do you want to continue?');
        if(res){
            GLOBAL_NAMESPACE.customize_option_changed = false;
            $(this).click();
        }else{
            console.log('stay on same page...');
            // Problem: user redirects to the clicked link even if he reaches here
        }
    }
});

我的实现思路有问题吗？这段代码有什么问题？或者有没有更好的方法来做到这一点？

Answer 1

这个fiddle 有效。

var GLOBAL_NAMESPACE = {};

$(document).ready(function(){
  GLOBAL_NAMESPACE.value_changed = true;
});

$('a').bind('click',function (e) {
    e.preventDefault();
    if (GLOBAL_NAMESPACE.value_changed){
        var res = confirm('you have unsaved changes. Do you want to continue?');
        if(res){
            window.location.href = $(this).attr('href');
        }else{
            console.log('stay on same page...');
        }
    }
});

我改变了几件事：

1. 在$(document).ready() 中，您正在设置GLOBAL_NAMESPACE.value_changed，在bind() 函数中，您正在读取GLOBAL_NAMESPACE.customize_option_changed
2. 根据您的 jQuery 版本，live() 方法将替换为 on()。我完全删除了这段代码，因为为了举例，我希望 GLOBAL_NAMESPACE.value_changed 为真。
3. 如果用户在离开页面后确认离开页面，则无需将GLOBAL_NAMESPACE.value_changed 设置为 false :)
4. 就像我在 cmets 中所说：我将 $(this).click(); 替换为 window.location.href = $(this).attr('href');