Question

使用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。返回设置为true后，它不再适用于Safari。奇怪的是，如果在返回Safari之前发出警报（“Hello”）确实显示警报但未能隐藏div并显示图像。

在Chrome上，一切都按预期工作。

也许我应该补充说我正在使用Bootstrap以及Bootstrap Validator

有什么想法吗？

Answer 1

尝试使用：

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

而不是使用

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

Answer 2

只需编写以下代码即可显示元素。

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

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

Answer 3

当您e.isDefaultPrevented()

时，jQuery API定义的

true仅为e.preventDefault();

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

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

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

3 个答案: