1

我已经实现了一个页面，其中包含一个选项列表（工作类别），单击时应该显示数据（工作描述）。我正在使用烧烤来处理后堆栈。

一切都很好，除了在用户第一次导航到页面时设置初始选择。我的代码被调用到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>

第一次 through historyCallback，直接调用 from $(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');

请注意，当我单击一个类别时，这些行会按预期工作。

似乎在此代码运行时，jQuery/DOM/whatever#category中创建的锚点loadCategories()尚不可用。

我需要某种延迟或什么吗？我错过了什么？

万分感谢。

4

2 回答 2

2

它不可用，因为 getJSON 函数异步运行。getJSON 回调发生在 json 数据从服务器到达之后。

不要使用延迟。什么可能会更好：

  1. 将类别选择放入回调中。
  2. 加载类别时触发自定义事件，然后绑定事件侦听器以在之后进行选择。
于 2011-10-18T23:11:08.753 回答
1

在我看来，问题出在时间上——你不能保证元素已经创建，因为它们取决于 JSON 是否已加载以及相关函数是否已执行。您的代码几乎肯定会在 addCategory() 执行之前调用 historyCallback()。不过，我对烧烤并不熟悉。

于 2011-10-18T23:09:41.427 回答