TIPS-小心IE7會偷改Anchor式HREF

今天用jQuery UI Tabs做網頁，其中部分頁籤要動態產生，故現場組裝<li><a href='#divName'><span>tabName</span></a></li>，再呼叫.tabs()達到目的。測試發現，動態產生的頁籤，在IE8開啟IE7相容模式時，點下去會以動態方式載入同一頁面，害網頁中的$(function() { ... })重覆被執行，弄得網頁一團亂。但若使用FF、Chrome甚至切成IE8標準模式執行，則沒有任何問題。

模索了好久，總算找出問題關鍵。

我寫成一小段Code，大家可以自己用Mini jQuery Lab實測一下:

$("body").append("<a href='#aaa'>AAA</span></a>");

alert($("body").html());

$("body").html("<a href='#aaa'>AAA</span></a>");

alert($("body").html());

大家覺得alert出來的結果是什麼，應該是<A href="#aaa">AAA</SPAN></A>吧? 對IE8, FF, Chrome來說是這樣沒錯，但在IE7模式下，卻會得到以下結果(其中htt"q"是故意改掉的，以避免PO文時被自動套上連結):
<A href="httq://www.darkthread.net/minijquerylab/EmptyFrame.htm#aaa">AAA</SPAN></A>

是的，不管用html()或append()，IE7都會很雞婆地套上location.href，而對jQuery UI Tabs來說，看到http開頭就意味著要由外部載入，才搞出這場風波。

最後，我用了以下的寫法含淚躲開...

$("body").append("<a xhref='#aaa'>AAA</span></a>");

$("a[xhref]").each(function() { 

    var a = $(this);

    a.attr("href", a.attr("xhref"));

    a.removeAttr("xhref");

}); 

alert($("body").html());