Question

我有一个很长的向导形式，就像我网站上的调查一样。我想写一个jQuery函数，这样当用户意外点击页面上的任何链接时（向导的预览和下一个按钮除外），首先会询问：你确定要继续吗？然后它被重定向到他点击的链接，如果他点击取消，没有任何反应..

到目前为止我所做的是页面的每个链接除了（next＆amp; previw）我添加了一个类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时执行此操作，请执行以下操作：

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

Answer 2

看起来您已经有代码来中断默认的A-tag点击，所以问题的关键在于检测字段何时发生变化，以便在导航之前询问是否要保存？

这是一个JSFiddle Detect Field Changes：

它向所有可编辑字段添加一个onchange事件，如果更改了某些内容，则将全局stae设置为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

如果确认功能的结果为假，则必须阻止默认操作

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

}）;

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

5 个答案: