jquery - Jqueryの後続のタブがajax天気ウィジェットをロードしない

Question

AJAX 天気ウィジェットを含む小さな (Cookie ベースの) タブ付きセクションを持つサイトを構築しています。私の問題は、AJAX コンテンツが最初にのみ読み込まれ、残りのタブをクリックしてもイベントが発生しないことです。ロード、キャッシュ、url href、id href などの使用に至るまで、多くの解決策を見つけましたが、いずれの場合も、実装しようとすると構文が台無しになります。どのソリューションが自分に適用できるかわかりません (一部/すべて?)。一見シンプルに見えますが、私はこれをあまりにも長い間見つめてきたと思います.

ここに私のタブのhtmlがあります:

        <div id="profileTabList" class="tabs">
        <a href="#toronto">Toronto</a>
        <a href="#montreal">Montreal</a>
        <a href="#calgary">Calgary</a>
        <a href="#vancouver">Vancouver</a>
        </div>

        <div class="hr"></div>

        <div id="profileTabData" class="both">

            <div id="toronto" class="tab_content">
                <div class="left">
                <div class="ws-widget"><span class="ws-location">Toronto, Canada</span></div>
                </div>
                <div class="right">
                <div class="ws-widget"><span class="ws-location">Moscow, Russia</span></div>
                </div>
            </div>

            <div id="montreal" class="tab_content">
                <div class="left">
                <div class="ws-widget"><span class="ws-location">Montreal, Canada</span></div>
                </div>
                <div class="right">
                <div id="cbc-montreal"></div>
                </div>
            </div>

            <div id="calgary" class="tab_content">
                <div class="left">
                <div class="ws-widget"><span class="ws-location">Calgary, Canada</span></div>
                </div>
                <div class="right">
                <div id="cbc-calgary"></div>
                </div>
            </div>

            <div id="vancouver" class="tab_content">
                <div class="left">
                <div class="ws-widget"><span class="ws-location">Vancouver, Canada</span></div>
                </div>
                <div class="right">
                <div id="cbc-bc"></div>
                </div>
            </div>

        </div>

私はクッキーベースのjquery-tabs.jsを使用しています:

$(function(){

function HashTabs(){
    var Cookie = $.cookie("offices");
    var activeTab = '';
    var navIndex = '';
    $('.tab_content').hide();

    if(!Cookie){
        $(".tabs a:first").addClass("active").show();
        $(".tab_content:first").show();

    } else if (Cookie != "") {
        $('.tabs > a:eq('+ Cookie +')').addClass('active').next().show();
        activeTab = $('.tabs > a:eq('+ Cookie +')').attr("href");
        $(activeTab).fadeIn(0);
    }

    $(".tabs > a").click(function() {
        $(".tabs a").removeClass("active");
        $(this).addClass("active");
        navIndex = $('.tabs > a').index(this);
        $.cookie("offices", navIndex);
        $('.tab_content').hide();
        activeTab = $(this).attr("href");
        $(activeTab).fadeIn(0);
        return false;
    });
}

$('#profileTabList').each(function(){
    return HashTabs();
});

});