質問: document.getElementById('hoge'); $(element).prepend(addHTML); ``` として、colorboxで表示するインライン部分を動的に生成しています。 しかし、その動的に生成した要素をクリックしてもモーダルウィンドウが表示されません。 しかし、一度モーダルウインドウを閉じた後、それ以降は正常にモーダルウインドウが表示されます。 なお、上記スクリプト実行後 > > Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. > > というエラーがコンソールには表示されています。 > > > 状況がうまく伝わらないかもしれず恐縮ですが、何が起きているのかもわからないので、考えられそうな原因を教えていただけると嬉しいです。 <追記> 改めて現象を整理すると 1footerでjquery及びcolorboxを読み込み。 2静的な物のクリック時は正常にcolorboxが機能。 3ページ内のテキストボックスから入力値を読み取り、$.postでphpに送信、DB内で合致するデータを引っ張り出し、colorboxで必要とされる記述通り、最初に掲示した様に生成。 4生成したものをクリックするとcolorboxが正常に機能せず、動的に生成した#hogehoge部分を表示するはずが、ページ全体をインラインとして表示。コンソールにエラー 51度モーダルウィンドウを閉じ、改めて同じ場所をクリックすると正常に動作 となります。
回答: エラーメッセージを見る限り、XMLHttpRequestを同期読み込みで行っているのが原因っぽいです こちらが詳細になります -下記引用- Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs. 簡単に意訳すると、 同期読み込みをワーカー以外で行うのはユーザー体験を損なうからWeb標準から外されることになった そのような使い方をした場合にDeveloperToolsの中で警告を出し、実験的に例外を投げることになる といった感じだと思います(ほぼ直訳です)