Q&A
発生している問題・エラーメッセージ
Javascriptでページ内容を変更した際の、画面への反映タイミングで悩んでいます。
例えば、clickイベント発火後、cssでbackground-colorを変更したとします。
その際、前後にalertを挟んで下記のようにコーディングしたとします。
html
1 alert("jQuery STEP1"); 2 $('body').css({ 'background-color' : 'red'}); 3 alert("jQuery STEP2");
この際、FirefoxとIE11,Edgeでは背景色がredになるのが、STEP1が終了した（つまりalertのボックスでOKをクリックしたタイミング）時点です。
しかし、Chrome,OperaはSTEP2が終了した時点になります。
これは、ピュアのJavascriptでも同様です。また、css()だけでなく、text()でも同様です。
このような挙動の違いは今までに認識しておらず戸惑っております。
理由や回避方法をどなたかご存じでしたら是非ご教授頂きたく存じます。
該当のソースコード
html
1<html> 2<head> 3<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 4</head> 5<body style="background-color:white;"> 6<button id="hoge"> 7Red Background Color by jQuery 8</button> 9<button id="page"> 10Blue Background Color by Javascript 11</button> 12<script> 13 14$('#hoge').on('click', function() { 15 alert("jQuery STEP1"); 16 $('body').css({ 'background-color' : 'red'}); 17 alert("jQuery STEP2"); 18}); 19 20 21window.onload = function() { 22 document.getElementById("page").onclick = function() { 23 var target = document.getElementsByTagName("body")[0]; 24 alert("Javascript STEP1"); 25 target.style.backgroundColor = "blue"; 26 alert("Javascript STEP2"); 27 }; 28} 29 30</script> 31</body> 32</html> 33
実際のところやりたいこと
$.ajaxで、Loading画面を表示する際に、clickイベント内で
javascript
1$('div.loadingWrapper').css({ 'display' : 'block'});
としても全く反映されないことからこの問題に行き当たりました。
補足情報（FW/ツールのバージョンなど）
各ブラウザは最新版です。
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/19 02:24