1

クリックするとデータ (ジョブの説明) が表示されるオプション (ジョブ カテゴリ) のリストを含むページを実装しました。バックスタックを処理するためにBBQを使用しています。

ユーザーが最初にページに移動したときに初期選択を設定することを除いて、すべてがうまく機能します。私のコードは正しい要素に呼び出されaddClass('selected')ていますが、コードの実行時にその要素が実際には利用できないようです。

$('#category' + C).append('bite me');これがスタイルシート/CSS の問題ではないことを証明するためにデバッグ コールを追加したことに注意してください。

これが私のコードです：

<script>
    function historyCallback(e) {
        var C = $.bbq.getState("category");
        if (C != undefined && C != 0) {
            // We've been navigated back to
            $('#Descriptions').empty();
            $.getJSON('/Jobs/GetJobDescriptions?' + 'JobCategory=' + C, function(descs) {
                $.each(descs, function(index, description) {
                    $('#Descriptions').append('<h3><a href="/Jobs/ShowJob?JobID=' + description.ID + '">' + description.JobTitle + '</a></h3>');
                    $('#Descriptions').append('<p>' + description.JobSummary + '</p>');
                    $('#Descriptions').append('<p><a href="/Jobs/ShowJob?JobID=' + description.ID + '">Read more...</a></p>');
                });
            });    
            $('a.jobcat').removeClass('selected');
            $('#category' + C).addClass('selected');
            $('#category' + C).append('bite me');
        }
        else { // category not specified so reset the page
            $.bbq.pushState({ category: 3 },2);
        }
    }

    function loadCategories() {
        $.getJSON('/Jobs/GetCategories', function(data) {
            var categories = data;
            $.each(categories, function(index, category) {
                addCategory(category.ID, category.CategoryName);
            });
        });
    }

    function addCategory(CatID, Name) {
        $('#Categories').append('<p><a class="jobcat" id="category' + CatID + '">' + Name + '</a></p>');
        $('#category' + CatID).click(function(event) {
            $.bbq.pushState({ category: CatID }, 2); // merge_mode=2 means wipe out
        });
    }

    $(document).ready(function () {
        $(window).bind("hashchange", historyCallback); // needed for bbq plugin to work     
        loadCategories();
        historyCallback(); 
    });   
 </script>

historyCallbackから直接呼び出された最初の$(document).readyはC未定義であるため、デフォルトのカテゴリである#has を設定するelseステートメントが実行されます。$.bbq.pushState({ category: 3 },2);category=3

これによりhistoryCallback、今度は が呼び出されC == 3ます。if句の最後の 3 行は効果がありません。

$('a.jobcat').removeClass('selected');
$('#category' + C).addClass('selected');
$('#category' + C).append('bite me');

カテゴリをクリックすると、これらの行が期待どおりに機能することに注意してください。

で作成された#categoryアンカーはloadCategories()、このコードが実行されたときに jQuery/DOM/その他でまだ利用できないようです。

ある種の遅延または何かが必要ですか？私は何が欠けていますか？

ありがとうございます。

4

2 に答える 2

2

getJSON 関数は非同期で実行されるため、使用できません。getJSON コールバックは、json データがサーバーから到着した後に発生します。

遅延を使用しないでください。うまくいくかもしれないもの：

  1. カテゴリの選択をコールバックに入れます。
  2. カテゴリが読み込まれたときにカスタム イベントをトリガーし、イベント リスナーをバインドして選択を行います。
于 2011-10-18T23:11:08.753 に答える
1

問題はタイミングにあるように見えます.JSONがロードされ、関連する関数が実行されたかどうかに依存するため、要素が作成されたことを保証することはできません. addCategory() が実行される前に、コードはほぼ確実に historyCallback() を呼び出します。でもBBQはよくわからない。

于 2011-10-18T23:09:41.427 に答える