隐藏 DIV 并在提交时显示图像答案

【问题标题】：Hide DIV and show image on submit隐藏 DIV 并在提交时显示图像
【发布时间】：2016-06-21 21:20:30
【问题描述】：

使用 jQuery 我需要隐藏 DIV 并在单击表单上的提交按钮时显示图像。

HTML的相关部分如下：

  <div class="form-group">
                <div id="submitDiv" class="col-md-offset-4 col-md-1">
                    <button id="Submit" name="Submit" type="submit" class="btn btn-primary">Submit</button>
                </div>
                <div id="SpinWheelDiv" class="col-md-offset-4 col-md-1">
                    <img id="SpinWheel" height="20px" src="../img/spin.gif" hidden="">
                </div>
        </div>

正在使用的jQuery脚本如下：

  <script type="text/javascript">
  $('#formCForm').validator().on('submit', function (e) {
    if (e.isDefaultPrevented()) {
        // handle the invalid form...
    } else {
        $('#SpinWheel').removeAttr('hidden');
        $('#submitDiv').attr("hidden","true");
        return true;
    }
  });
 </script>

问题在于，当 return 设置为 false 时，这在 Safari 和 Chrome 上都有效。将 return 设置为 true 后，它不再适用于 Safari。奇怪的是，如果在返回 Safari 之前放置一个警报（“Hello”）确实显示警报但无法隐藏 div 并显示图像。

在 Chrome 上一切正常。

也许我应该补充一点，我正在使用 Bootstrap 和 Bootstrap Validator

有什么想法吗？

【问题讨论】：

用你的代码创建一个 jsfiddle，不确定你要什么。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

尝试使用：

$('#submitDiv').attr("hidden","hidden");

而不是使用

$('#submitDiv').attr("hidden","true");

【讨论】：

【解决方案2】：

您只需编写以下代码来显示一个元素。

 $('#submitDiv').show();

显示或隐藏最好最简单的方法是使用方法.show() and .hide()

【讨论】：

【解决方案3】：

e.isDefaultPrevented()被jQuery API定义为只有true当你e.preventDefault();时

我不确定此检查是否符合您的要求，但如果您不阻止提交按钮的默认行为；它将触发对上述 <form> 的操作，这通常会导致页面刷新。

e.preventDefault() 并从那里开始处理您的表单。

【讨论】：