Question

提交表格时，我试图弹出此消息。下面是HTML和jQuery片段。

<button type="submit" name="submit" class="btn btn-block btn-submit mb-1">
    Submit!
</button>
<div class="form-submitted d-flex align-items-center justify-content-center">
    <p class="p-2">Your form has been submitted&#33;</p>
</div>

jQuery：

var $submitMessage = $('.form-submitted');
var $submitBtn = $('form button');

$submitMessage.hide();
$submitBtn.click(function() {
    $submitMessage.slideDown(2000);
});

由于某些原因，加载页面时div仍在屏幕上。发生了什么事？

Answer 1

为什么不使用$submitMessage.hide();而不使用<div class="form-submitted" style="display: none;"></div>？

单击按钮时，它会提交表单并重新加载页面（如果表单操作本身）。在您的情况下，最好的做法是通过ajax发布数据，并在您的Slidedown成功回调后进行发布。

类似：

$.ajax({
  type: 'POST',
  url: '/yourendpoint',
  data: yourdataobject,
  success: function(data) {
    $submitMessage.slideDown(2000);
  },
  error: function(data) {
    yourErrorHandler(data);
  }
});

Answer 2

Origin: https://one.example.com

这等待HTML页面准备就绪，以便事件/操作/方法能够对其进行处理。

这将解决您的问题。

Origin: https://two.example.com

Answer 3

当您单击“提交”按钮时，页面正在重新加载，因此$（'。form-submitted'）将不会隐藏。

您需要将button type ='submit'更改为'button'

您需要为此使用ajax。

 $submitMessage.hide();
 $.post(YourPostUrl, YourParameters, function(){
          $submitMessage.slideDown(2000);
    });

jQuery选择器不起作用，导致功能无法运行

3 个答案: