【jQuery】IEでテーブル要素を追加したら親子関係がめちゃくちゃに!
最近「グーグルマップAPI」を使って遊んでいるんですが、変な問題に悩まされてしまいました・・。
グーグルマップをクリックしたときにポップアップ表示される「info_window」というのがあるですが、ここにjQueryで定義した要素をたくさん追加すると、親子関係が何かおかしくなってしまう・・。
具体的にいうと、「テーブル要素」の後に追加した要素が、全てテーブル中に取り込まれて、子要素になってしまう・・。
これはIEだけで起きる現象で、他のブラウザでは起きません・・。
これは恒例のIEクソバグだと思うので、もう理屈を考えても仕方ありません・・。
下記のように、IEの場合だけ、テーブル要素の後ろに追加するべき要素を、遅れたタイミングで追加(append)するようにしました・・。
(こうすればテーブル要素内に取り込まれず、兄弟関係として追加できるみたい)
//Googleマップのウィンドウを定義 var info_window = new google.maps.InfoWindow({ //パラメータ content: jQuery(hogege_map_content).prop('outerHTML') }); //ブラウザがIEかどうかチェック var is_IE = false; var userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) { var is_IE = true; } //IEの場合は後から要素を追加 if (is_IE == true){ google.maps.event.addListener(info_window, 'domready', function(){ jQuery(hogege_map_content).append(ie_kuso1); jQuery(hogege_map_content).append(ie_kuso2); jQuery(hogege_map_content).append(ie_kuso3); }); }
クソコードとなりますが、異常です・・。