私は WordPress のプロジェクトに取り組んでおり、テーマ カスタマイザーを利用して、私と一緒にサイトで作業している他の人々を支援しています。Google フォントなどの多くのコンテンツとオプションを動的にロードしているため、カスタマイザーのロードは完全にロードするのに数秒かかります (管理ページに留まり、数秒後に /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"]')「themes.php」などのバックエンドの他のスラッグに変更すると、同じ結果になります)けれど）。