在重定向到已点击的链接之前要求用户确认

Asking user confirmation before redirect to a clicked link

本文关键字：确认 用户 链接 重定向      更新时间：2023-09-26

我有一个很长的向导表单，就像我网站上的调查一样。我想写一个jQuery函数，这样当用户不小心点击页面上的任何链接(除了预览和下一步按钮的向导)，它是问第一个:你确定你要继续?然后它被重定向到他点击的链接，如果他点击取消，什么也不会发生。

到目前为止，我所做的是对页面的每个链接，除了(next &预览)我已经添加了一个类link_ridirect，所以我可以抓取所有的锚链接。并停止重定向。

jQuery函数如下!

<script type="text/javascript">
<!-- HERE IS THE SEARCH FILTER -->
 //<![CDATA[
    var GLOBAL_NAMESPACE = {};
    $(document).ready(function(){
      GLOBAL_NAMESPACE.value_changed = true;
    });
    $(document).ready(function () {
      $('.link_redirect').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...');
              }
          }
      });
    });
//]]>
</script>

所以我想做的是如何声明一个全局变量来跟踪所有字段的状态。因此，如果字段发生变化，要使其为真并调用prevent函数。

这样做如何:

 $('a').click(function(){return confirm("are you sure?");});

把它放在你的html的底部，或者在你的页面的onload中，或者在你的op中建议的文档中。

编辑如果您只想在变量changesDetected为true时执行此操作，则这样做:

 $('a').click(function(){return !changesDetected || confirm("are you sure?");});

看起来你已经有代码来中断默认的a标记点击，所以关键是要检测一个字段何时发生了变化，以至于你想在导航离开之前询问他们是否想要保存?

这是一个JSFiddle检测字段更改:

它为所有可编辑字段添加了一个onchange事件，当某些内容发生变化时，该事件将全局状态设置为true。

如果用户输入了一个字段，然后没有更改就退出，则不检测任何更改。

function setup() {
  // bind the change event to all editable fields. Runs on load(or doc ready)
  $("input,select").bind("change",function(e) {
      GLOBAL_NAMESPACE.value_changed = true;
  });  
};

你需要使用beforeunload事件。当您离开页面时处理此事件。

$(this).on("beforeunload", function () {
                return 'are you sure';
            });

如果你需要，该事件调用不为预览按钮和下一步，你可以取消绑定此事件处理程序。

    $('#myPreviewButtonId').click(function()
{
          console.log('preview clicked');
          $(this).unbind("beforeunload");
});


(function($) {
    $.fn.checkFileType = function(options) {
        var defaults = {
            allowedExtensions: [],
            success: function() {},
            error: function() {}
        };
        options = $.extend(defaults, options);
        return this.each(function() {
            $(this).on('change', function() {
                var value = $(this).val(),
                    file = value.toLowerCase(),
                    extension = file.substring(file.lastIndexOf('.') + 1);
                if ($.inArray(extension, options.allowedExtensions) == -1) {
                    options.error();
                    $(this).focus();
                } else {
                    options.success();
                }
            });
        });
    };
})(jQuery);
$(function() {
    $('#image').checkFileType({
        allowedExtensions: ['jpg', 'jpeg'],
        success: function() {
            alert('Success');
        },
        error: function() {
            alert('Error');
        }
    });
});
label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
}
<form action="#" method="post" enctype="multipart/form-data">
    <div>
        <label for="image">Upload image (JPEG only)</label>
        <input type="file" name="image" id="image" />
    </div>
</form>

必须防止对确认函数的if结果为false的默认操作

$(document).ready(function () {
$(".deleteJob").on("click", function (e) {
    if (!confirm("Are you Sure want to delete!")) {
        e.preventDefault();
    }
});

});

相关文章：