jquery及びプラグインのcolorboxを使っています。
ajaxで取得したデータを取得したのち
javascript
1var addHTML = hogehoge; 2var element = document.getElementById('hoge'); 3$(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/.
というエラーがコンソールには表示されています。
状況がうまく伝わらないかもしれず恐縮ですが、何が起きているのかもわからないので、考えられそうな原因を教えていただけると嬉しいです。
<追記>
改めて現象を整理すると
①footerでjquery及びcolorboxを読み込み。
②静的な物のクリック時は正常にcolorboxが機能。
③ページ内のテキストボックスから入力値を読み取り、$.postでphpに送信、DB内で合致するデータを引っ張り出し、colorboxで必要とされる記述通り、最初に掲示した様に生成。
④生成したものをクリックするとcolorboxが正常に機能せず、動的に生成した#hogehoge部分を表示するはずが、ページ全体をインラインとして表示。コンソールにエラー
⑤1度モーダルウィンドウを閉じ、改めて同じ場所をクリックすると正常に動作
となります。