在重定向到单击的链接之前询问用户确认

Question

我有一个很长的向导表格，就像我网站上的一项调查一样。 我想编写一个jQuery函数，以便当用户无意中单击页面上的任何链接（向导的预览和下一步按钮除外）时，首先会询问您：确定要继续吗？ 然后将其重定向到他单击的链接，如果他单击“取消”，则什么都不会发生。

到目前为止，我所做的是对页面的每个链接的了解，除了（下一个和上一个），我添加了一个类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>

因此，我想做的是如何声明全局变量来跟踪所有字段状态。 因此，如果某个字段发生更改，则将其设置为true并调用prevent函数。

Answer 1

如何做到这一点：

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

将其放置在html的底部，页面的上载或文档中，如OP中所建议的那样。

编辑如果您只想在变量changesDetected为true执行此操作，请changesDetected方式进行操作：

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

Answer 2

看来您已经有代码来中断默认的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;
  });  
};

Answer 3

您需要使用beforeunload事件。 当您退出页面时，将处理此事件。

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

如果需要，该事件不用于预览按钮，然后单击下一步，可以取消绑定此事件处理程序。

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

Answer 4

 (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> 

Answer 5

如果确认功能的结果为false，则必须防止对默认操作

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

}）;