Невозможно изменить элементы, добавленные во время $ (документ) .ready во время $ (документ) .ready - PullRequest
Новая
       12

Невозможно изменить элементы, добавленные во время $ (документ) .ready во время $ (документ) .ready

1 голос
/ 19 октября 2011

Я реализовал страницу со списком параметров (категорий заданий), которые при нажатии должны отображать данные (описания заданий).Я использую барбекю для обработки заднего стека.

Все работает отлично, кроме установки начального выбора, когда пользователь впервые переходит на страницу.Мой код вызывается на 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');

Обратите внимание, что эти строки ДЕЙСТВУЮТ, как и ожидалось, когда я нажимаю на категорию.

Похоже на *Якоря 1028 *, созданные в loadCategories(), еще не доступны для jQuery / DOM / независимо от того, когда выполняется этот код.

Нужна ли какая-то задержка или что-то?Чего мне не хватает?

Спасибо за тонну.

Ответы [ 2 ]

2 голосов
/ 19 октября 2011

Он недоступен, потому что функция getJSON работает асинхронно.Обратный вызов getJSON происходит после того, как данные json поступают с сервера.

Не используйте задержку.Что может работать лучше:

  1. Поместите выбор категории в обратные вызовы.
  2. Инициировать пользовательское событие при загрузке ваших категорий, а затем привязать прослушиватель событий, который сделает ваш выбор после.
1 голос
/ 19 октября 2011

Похоже, проблема в синхронизации - вы не можете гарантировать, что элементы были созданы, поскольку они зависят от того, загружен ли JSON и выполнена ли связанная функция.Ваш код почти наверняка вызовет historyCallback () до того, как addCategory () выполнится.Я не знаком с барбекю, хотя.

...