javascript - ダイアログ付きのjQuery UIタブ

Question

2 つのタブを持つ jQuery タブがあります。各タブは、2 つの異なるページからコンテンツをロードします。親ページには、jQuery UI ダイアログの Div があります。

ページが初めて読み込まれ、最初のタブのリンクをクリックすると、UI ダイアログが開き、期待どおりに完全に機能します。次に、タブ 2 に移動してから戻ってきます。次に、同じリンクを押します。UI ダイアログが開きません。

struts1 (JAVA) を使用しています。

親ページのスクリプト

$(document).ready(function() {
    $("#tabs").tabs();
    $("#addHrsDet").dialog({
        autoOpen : false,
        modal : true,
        height : 600,
        close : closeHours,
        width : 900
    });
});

<div id="addHrsDet" title="Add Minutes">
        <iframe id="addHrsDetIframe" width="100%" height="100%"
            marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
            title="Add Minutes">Your browser does not support</iframe>
</div>

タブ 1

function editPrjHours(prjId, menuId, prjHourId) {
    $.ajaxSetup({
        cache : false
    });
    $("#addHrsDetIframe").attr(
            "src",
            "addhrs.do?prj=" + prjId + "&menuId=" + menuId + "&prjHourId="
                    + prjHourId + "&hm=true");
    $("#addHrsDet").dialog("open");
}

タブ 2 は空です

編集

firbug を確認すると、エラーTypeError: $("#addHrsDet").dialog is not a function が表示されます