0

我正在使用 WordPress 中的一个项目，该项目使用主题定制器来帮助与我一起在网站上工作的其他人。我们动态加载了很多内容和选项，比如谷歌字体，所以定制器的加载需要几秒钟才能完全加载（在管理页面上徘徊，几秒钟后进入 /customize.php 页面） .

正因为如此，我想添加一个简单的“Customizer Loading”消息，它会弹出来让用户知道发生了什么事。在 Chrome 和 Firefox 中一切正常，但是 Safari 和 Internet Explorer（据我在 Sauce 中的测试可以看出）给我带来了问题。

我正在使用以下 JavaScript 代码添加加载消息：

$('a[href="customize.php"]').click( function() {
  $('head').prepend('<style type="text/css"></style>');
  $('body').prepend('<div id="loading-message"></div>');
});

在<style type="text/css">块内，我简单地包含了我的样式，然后<div class="loading-message"></div>是我放置内容的地方。

在 Safari 中发生的事情（同样是我所知道的 IE）是，当<a href="customize.php">...</a>被点击时，样式和内容被添加到 DOM 中（当我检查页面时我可以看到它们），但它们实际上并没有变得可见，而在 Chrome 和 Firefox 中则可见。

如果我e.preventDefault()在链接上使用，加载消息会显示得很好。其他事件，喜欢alert()和console.log()注册很好，链接将按预期继续。只有添加到 DOM 中的新内容才不可见。

我无法弄清楚究竟是什么导致了这种情况，并且非常感谢任何帮助。我尝试在 JSFiddle 中重新创建问题，但我无法复制我在 WordPress 管理面板中得到的相同结果（如果您更改$('a[href="customize.php"]')为后端中的任何其他 slug，如“themes.php”，它具有相同的结果尽管）。

4

0 回答 0