google Chromeで.html()でDIVを書き換えられない

Question

お世話になっております。
google Chromeバージョン 42.0.2311.135 (64-bit)
で、下記の処理ができず悩んでおります。

ID="bunrui"をclickし、hedgehog.phpにpostし、結果をid="button"
のdivに出力すると言う処理です。

現象として、hogehoge.phpから出力されたhtmlは表示されるのですが、元々書かれていたhtml部分が消えずに残ってしまいます。

IE,Safariでは正常に動いています。
何か書き方に問題はあるでしょうか？ご教授下さい。

【jquery部分】
$(document).on('tap', '#bunrui', function(){
$.post('hedgehog.php?',{'BCD':this.title},
function(data){
res = JSON.parse(data);
setTimeout(function(){
$("#button").html(res.button);
},300);
});
});

【html部分】

<div id="button"> </div>

Answer 1

もう解決されているかもしれませんが・・・。

hogehoge.phpから出力されたhtmlは表示される

と

元々書かれていたhtml部分が消えずに

ということなので、ご質問の意図を
「hogehoge.phpから出力されたhtmlで<div id="button"></div>を置換する」ことと推察しました。

そこで、リスト中の

$("#button").html(res.button);

の部分を以下のように

$("#button").replaceWith(res.button);

あるいは、

$(res.button).replaceAll("#button");

とすれば、ご所望の動作になるのではと思います。

Answer 2

01.通信に失敗していないか。
02.POSTしたデータのバリデーションでエラーを出していないか。
03.phpは正しく返答しているか。
04.受け取ったレスポンスが正常か。
05.JSONでパースするところまで成功しているのか。
06.res.buttonに入っている内容は意図したものだったのか。
07.res.buttonに入っている内容が htmlメソッドに渡すモノとして問題ないのか。
08.URLデコードはきちんと行われたのか。
09.その他jQueryの挙動の問題なのか。
10.chromeはエラーを出しているのか。それはどういうモノなのか。

このリストを１つ１つを上から順番に検証してください。すぐ回答が見つかるはずです。
(ある程度やっているなら、どこまで検証したのか 質問文に記載してください。)
＃たとえば、IE,Safariで動いているように見えるほうが問題なのかもしれませんね。

Answer 3

サーバーにのせても動きませんか。
Chromeで外部ファイルを参照する時は、よくローカルがNGだったりするもので。