jQuery的依賴

Question

我有以下代碼：

function drawDimensions(divid) { 
    // This function gets a JSON file, loops through the JSON code using $.each and fills the divid with parsed JSON content 
} 

在另一方面，我有2個功能，可以讓我用$.toggle()切換菜單和子菜單。

我應該在$(document).ready(function() { });下加載什麼？

目前，我正在加載drawDimensions 和下的切換功能，但切換不起作用。我需要在文檔就緒功能中以特定順序加載它們嗎？有關係嗎？

注意：如果禁用drawDimensions並簡單地將輸出html附加到代碼，則切換函數可以工作。

Answer 1

將代碼放入$(document).ready()閉包中，以確保在運行任何JavaScript之前完全解析DOM。

這聽起來像是在向DOM動態添加HTML，在這種情況下，您必須在添加HTML後對該HTML執行「工作」，或者使用事件委託將事件綁定到稍後添加到DOM的元素：

$(document).on('click', '.dim', function (event) { 
    event.stopPropagation(); 
    $(this).children('.hidden').toggle(); 
}); 

$(document).on('click', '.parent', function() { 
    $(this).children('.dim').toggle(); 
}); 

$(document).on('click', '.hidden', function (event) { 
    event.stopPropagation(); 
}); 

這裏是一個演示：http://jsfiddle.net/76uTr/2/（注：使用「添加菜單」鏈接動態地添加另一個菜單看到該事件綁定動態添加到DOM元素工作）

代替將事件處理程序直接綁定到元素，這將允許您爲要添加的元素設置事件處理程序未來的DOM。

請注意，.on()是jQuery 1.7中的新增功能，在這種情況下與.delegate()相同（語法有點不同，但您可以在文檔中看到）。

• .on()：http://api.jquery.com/on
• .delegate()：http://api.jquery.com/delegate

我今天早些時候一把抓起我的回答驗證碼你的問題：jQuery toggle children of div

Answer 2

$(document).ready()只是運行時的所有頁面上的元素都有被渲染。這是一種確保對DOM的修改和操作成功處理的不可靠方法。

這應該工作，太：

$("#element").toggle(myFunction($(this)), myOtherFunction($(this)));