1

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

我是如何实现的：

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

我已经做到了这一点。但问题是即使用户点击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
        }
    }
});

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

4

1 回答 1

1

这个小提琴有效。

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. 就像我在评论中说的那样：我替换$(this).click();为window.location.href = $(this).attr('href');
于 2013-03-20T12:18:37.610 回答