在$（document）.ready期間無法更改$（document）.ready期間添加的元素

Question

我實現了一個頁面，其中包含選項（職位類別）列表，單擊該選項后應顯示數據（職位描述）。 我正在使用燒烤來處理后籌碼。

除了在用戶首次導航到頁面時設置初始選擇外，一切都很有效。 我的代碼被調用將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是未定義的，因此else語句執行$.bbq.pushState({ category: 3 },2); 它將#has設置為category=3 ，這是我的默認類別。

這會導致再次調用historyCallback ，這次使用C == 3 。 if子句末尾的三行無效：

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

請注意，當我單擊某個類別時，這些行會按預期工作。

看起來在loadCategories()中創建的#category錨在此代碼運行loadCategories()不適用於jQuery / DOM /。

我需要某種延遲礦石嗎？ 我想念什么？

萬分感謝。

Answer 1

因為getJSON函數異步運行，所以它不可用。 json數據從服務器到達后發生getJSON回調。

不要使用延遲。 什么可能會更好：

1. 將類別選擇放入回調中。
2. 在加載類別時觸發自定義事件，然后綁定事件監聽器，然后進行選擇。

Answer 2

在我看來，問題出在時間上-您不能保證已創建元素，因為它們取決於是否已加載JSON和相關功能是否已執行。 您的代碼幾乎肯定會在執行addCategory（）之前調用historyCallback（）。 不過，我對燒烤並不熟悉。