Javascript jQuery.show（）；不在代码中工作，但在控制台中工作？

在我的代码（表单提交）开始时，我希望显示一个工作的动画gif，因此我有如下代码

$('form#{$model->formName()}').on('beforeSubmit', function(e){   
    $("#loading").show();
    console.log('1 - spinny thing should be displayed?!');

    var \$form = $(this);
    ...

代码的其余部分都可以正常工作并执行，但由于某些原因，loading div从不显示

如果我在控制台中输入完全相同的行

$("#loading").show();

它显示

我的加载div的CSS是

#loading {
  z-index: 9999;
  /*center*/
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  border-bottom: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

此外，我在其他多个页面中使用了相同的方法，它们都很好地工作

我应该找什么

我错过了什么

谢谢你的时间和帮助

更新1 进一步的测试显示，我将该行移到它工作的函数中的其他地方，但不会作为第一行工作（与我使用代码的其他页面不同？非常奇怪）

更新2 我发现我的模式出现了一些奇怪的问题。我重命名了模式上的“关闭”按钮，突然一切都正常了？我必须做更多的挖掘来了解发生了什么。谢谢大家的帮助。

你应该试试调试器。 最有可能的情况是，如果在执行此代码时将div

#loading

附加到DOM，则应显示

loading

div。此外，该div很可能会出现几秒钟，并由于下面执行的某些代码而隐藏。它非常快，可能会丢失。 另一个可能的情况是，您可能期望JS同步运行

$('form#{$model->formName()}').on('beforeSubmit', function(e){   
    $("#loading").show();
    console.log('1 - spinny thing should be displayed?!');
    debugger;
    var \$form = $(this);
    ...
    ...
    $("#loading").show();
})

debugger；

语句将在任何写入的地方暂停执行，您可以查看div是否正在加载。

---

进一步参考：

您可能需要将代码包装在

$（document）.ready（）中

以避免jQuery试图将事件附加到尚不存在的DOM元素的竞争条件。请参阅jQuery文档：

所提供的代码很难判断。加载div是否具有正确的ID？表单是否可能由于提交事件而重新加载，从而重新隐藏加载元素？加载元素是否正确放置在一个相对元素内，这样它可能会出现在屏幕外？如果您将该行替换为

console.log（$（“#加载”）.length）

-它记录了什么？调用该代码时，

#loading

元素对DOM可用吗？当您在终端中运行代码时，页面已完全加载，因此它可以工作，但从执行角度来看，它可能不可用。因此您说的是控制台日志行（加载后显示）工作，但加载div不显示？加载div中的标记是什么？加载div在表单中的位置是什么？Santi。它返回1。“那么你是说控制台日志行（加载显示后）工作，但加载div不显示？”-是的，没错。标记非常简单，放在我的模式页脚之后（与我的其他观点完全相同）。