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

我已經實現了一個頁面，其中包含一個選項列表（作業類別），單擊時應顯示數據（作業說明）。我正在使用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是不確定的，因此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錨尚未公佈將jQuery/DOM /時運行此代碼什麼的。

我需要某種延遲礦石嗎？我錯過了什麼？

謝謝了。

來源

2011-10-18 tig

我看來像的問題是時間 - 你不能保證這些元素被創建，因爲它們依賴於JSON是否已經加載和相關功能已執行。在addCategory（）執行之前，你的代碼幾乎肯定會調用historyCallback（）。不過，我並不熟悉BBQ。

來源

2011-10-18 23:09:41

獲勝者！我忘了'.getJSON'創建了一個異步委託。移動調用'historyCallback'向右'$。每個後{}'的'聲明固定loadCategories'它。我愛你StackExchange！ – tig

當然不是幾乎肯定但明確。在AJAX中的回調將永遠不會在'historyCallback'調用之前運行。 – Guffa

它不可用，因爲getJSON函數異步運行。 getJSON回調發生在json數據從服務器到達後。

請勿使用延遲。什麼可能會更好地工作：

將類別選擇放入回調。
當您的類別被加載時觸發一個自定義事件，然後綁定一個事件偵聽器，讓您選擇之後。

來源

2011-10-18 23:11:08 Koobz

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

回答

相關問題