0

次の長い質問でごめんなさい。問題のデバッグから得られたすべての調査結果を含めたので、長い時間がかかります。

ここで何が起こっているのか混乱しています。これをデバッグするのにしばらく時間を費やしましたが、問題が何であるかを理解できないようです。

で実行される2つの関数があり、page loadこれらのコードはこの質問の最後にあります。 getTabMenu()getTabFrame()

これらはすべてで正常に機能しpage loadます。

ただし、その後、（ブラウザを更新せずに）page loadこれらの関数を再度実行すると、つまり、データベースにレコードを挿入した後、上記の関数は少し余分なデータを取得します。何らかの理由で、新しく作成されたタブがクリックされたときに最初のタブページのコンテンツを開き続けます。すべてのIDが正しく割り当てられているように見えても、タブコンテンツの代わりに開く必要があります。ブラウザの更新ボタンを使用してページを表示するとすぐに、正しく機能し始めます...ajax styleclick eventhtmlJSONrefresh

デバッグ中にキャプチャした出力の一部を次に示しますhtml。json

ページの読み込み時：

getTabFrame()生成：

[
    {
        "key": 4,
        "value": "Internal"
    },
    {
        "key": 5,
        "value": "External"
    },
    {
        "key": 6,
        "value": "Reporting"
    },
    {
        "key": 7,
        "value": "General interest"
    }
]

getTabMenu()生成：

<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>

page loadこれが発生し、すべてが正しく機能するため、すべてが良好に見えます。

データベースに新しい行を挿入し、ブラウザを更新せずに上記の関数を再実行すると、次のようになります。

getTabFrame()生成：

[
    {
        "key": 4,
        "value": "Internal"
    },
    {
        "key": 5,
        "value": "External"
    },
    {
        "key": 6,
        "value": "Reporting"
    },
    {
        "key": 7,
        "value": "General interest"
    },
    {
        "key": 38,
        "value": "Other"
    }
]

GetTabMenu()生成：

<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>
<div class="item" id="tab4">Other</div>

繰り返しますが、すべてが良さそうです。htmlとjsonスニペットの余分なデータに注意してください。

問題については、私が今clickオンにすると、 URLクエリ文字列を介しtab4てキー4を送信します。キーを送信する必要があります。つまり、キーを送信するため、キーを送信するをクリックした場合と同じページが表示されます。古いタブのいずれかをクリックして、正しいページを返します。問題を引き起こしているのは、新しく作成されたタブだけです。get_tab_content.aspx384tab04

したがって、ブラウザを更新すると、次のようになりますpage load。

getTabFrame()生成：

[
    {
        "key": 4,
        "value": "Internal"
    },
    {
        "key": 5,
        "value": "External"
    },
    {
        "key": 6,
        "value": "Reporting"
    },
    {
        "key": 7,
        "value": "General interest"
    },
    {
        "key": 38,
        "value": "Other"
    }
]

getTabMenu()生成：

<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>
<div class="item" id="tab4">Other</div>

これは、ブラウザを更新せずにボタンがクリックされたときに返される出力とまったく同じに見えることに注意してください。これは正しいことです。

今、私がクリックするとtab4、それは送信されます38、これは正しいです、そしてどのインターンが正しいページコンテンツを返します...

したがって、基本的に、関数を再実行すると正しいhtmlとjsonが生成されますが、ページの読み込み時に存在しなかった新しく作成されたデータは、ブラウザーが更新されるまで正しく機能しません。

なぜこうなった？

getTabMenu()関数は次のとおりです。

function getTabMenu() {
    $.ajax({
        url: 'get_tab_menu.aspx?rand=' + Math.random(),
        type: 'GET',
        error: function(xhr, status, error)
        {
            console.log(status);
            console.log(xhr.responseText);
        },
        success: function(results) 
        { 
            $("#div1").empty().append(results);
        }
    });
}

そしてここにgetTabFrame()機能があります：

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function(results) {
            var tabs = $("#tabs");

            $.each(results, function(index, item) {
                tabs.tabs("add","get_tab_content.aspx?tab=" + item.key, item.value)
                    .find('>ul>li:last')
                    .attr('id', 'tab_' + item.key);

                alert(item.key);

                // new click events
                $("#tab" + index + "").live('click', function() { $("#tabs").tabs( "select" , index ); });
            });

            getTabMenu();
        }
    });
}
4

1 に答える 1

0

ここでは暗闇の中で撮影しているかもしれませんが、ライブイベントハンドラーをajax成功関数に含めるべきではないと思います。そこで実行すると、すべての呼び出しに追加のライブイベントハンドラーが配置されます。関数から削除して個別に配置してみてください（$（document）.ready内にある必要はありません）。

于 2011-07-20T12:18:40.903 に答える