Question

在我的代码（提交表单）的开头，我想显示一个有效的动画gif，所以我有如下代码，例如

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

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

其余代码都可以正常工作并执行，但是由于某些原因，加载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

我发现我的模态有一些奇怪的问题。我重命名了模式上的关闭按钮，突然一切正常？我必须做更多的挖掘工作才能了解发生了什么。谢谢大家的帮助。

Answer 1

您应该尝试调试器。最有可能的是，如果在执行此代码时将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。有关更多参考：https://developers.google.com/web/tools/chrome-devtools/javascript/

Answer 2

您可能需要将代码包装在$( document ).ready()中，以避免出现竞争情况，在这种情况下jQuery试图将事件附加到尚不存在的DOM元素上。请参阅jQuery文档：https://learn.jquery.com/using-jquery-core/document-ready/

jQuery .show（）;无法在代码中工作，但可以在控制台中工作？

更新1

更新2

2 个答案: