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 
} 

は、私は私が$.toggle()を使用して、メニューやサブメニューを切り替えることができます2つの機能を持っています。

$(document).ready(function() { });でロードする必要があるものはありますか？

現時点では、私はdrawDimensions とをトグル機能の下にロードしていますが、トグルは機能しません。文書準備機能内でそれらを特定の順序でロードする必要がありますか？それは問題ですか？

ノート：drawDimensionsを無効にして出力htmlをコードに添付すると、トグル機能が機能します。

Answer 1

コードを$(document).ready()クロージャーに入れて、JavaScriptを実行する前にDOMが完全に解析されていることを確認します。

DOMにHTMLを動的に追加しているようですが、そのHTMLを追加した後にそのHTMLで「作業する」必要があります。イベント委譲を使用して、後でDOMに追加される要素にイベントをバインドします：http://jsfiddle.net/76uTr/2/（注：動的イベントバインディングが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(); 
}); 

はデモですイベントハンドラを要素に直接バインドすると、追加される要素のイベントハンドラを設定できます将来の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)));