Question

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

我是如何实施的：

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

到目前为止我已经完成了。但问题是即使用户点击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...');
        }
    }
});

我改变了一些事情：

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

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

1 个答案: